bootstraptable查看详情_使用bootstrap-table表格组件制作服务端分页实例

今天我们来介绍一款国产表格组件bootstrap-table，它通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤(扩展)等功能，所以目前正在被越来越多的人所接受。

而作为一个表格处理的组件，主要是用来展示数据的，而上一篇文章说到了服务端和客户端分页，客户端分页很简单，直接把数据查出来丢给bootstrap-table就行了，今天主要来讲一下如何进行服务端分页。

首先我们要明确，做服务端分页的时候，有哪些必须的传入参数和回传参数：

传入：pageindex页码，pagesize每页显示多少

回出：total数据总条数，rows分页后查出的数据

知道这些之后，我们就可以来写代码了

1.首先在body里放一个table表格标签

2.然后写JS渲染为bootstrap-table组件，并设置一些参数，重要的参数我都打了注释

function GetOrderData() {

$("#table").bootstrapTable('destroy');//销毁表格

$('#table').bootstrapTable({

clickToSelect: true,//启用单击选中

pagination: true,//启用分页

url: "/web/Order/GetOrderData",//请求地址

contentType: "application/x-www-form-urlencoded",//post提交必须要有

method: 'POST',//提交方式

pageNumber: 1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数(*)

pageList: [10, 20, 50, 100], //可供选择的每页的行数(*)

queryParamsType: 'limit',//传入参数类型

queryParams: function (params) {

return {

PageSize: params.limit,//每页显示多少条

PageNumber: params.offset / params.limit + 1//当前页码

}

},

sidePagination: "server",//服务端分页

striped: false,

responseHandler: function (res) {//自定义回传数据

if (res.data == null) {

return {

"total": res.data,//总页数

"rows": res.data //回传的数据

}

}

else {

return {

"total": res.data.total,

"rows": res.data.data

};

}

},

columns: [

{

field: 'OrderNum',

title: '订单流水号',

visible: true,

sortable: true,

width: '15%'

},

{

field: 'CreatedName',

title: '创建人',

visible: true,

sortable: true,

width: '15%',

editable: true,

},

{

field: 'CreatedTime',

title: '创建时间',

visible: true,

sortable: true,

width: '20%',

editable: true,

},

{

field: 'OrderCategory',

title: '订单类型',

visible: true,

sortable: true,

width: '15%',

editable: true,

formatter: function (value, row, index) {

if (value == 1) { return "即时订单" }

else if (value == 2) { return "预约订单" }

else { return "订单类型错误" }

}

},

{

field: 'OrderStatus',

title: '订单状态',

visible: true,

sortable: true,

width: '15%',

editable: true,

formatter: function (value, row, index) {

if (value == 0) { return "已取消" }

else if (value == 1) { return "预订单" }

else if (value == 2) { return "进行中" }

else if (value == 3) { return "已完成" }

else { return "订单状态错误" }

}

},

{

field: 'Id',

title: '操作',

formatter: function (value, row, index) {

return '查看详情'

}

}

]

});

}

3.后台回传数据

retrun Json(new {total=处理后的数据,rows=总行数})

具体后台如何查询处理数据这里就不再赘述了，不懂得同学移步www.baidu.com

4.效果如下