bootstrap table 服务器端分页

bootstrap table 服务器端分页,时间开发中我们通常是在服务器端来实现分页，比如你数据库有100万数据，不可能把100万数据都发送到前端，通过前端分页。bootstrap table 实现服务器端分页需要以下三个步骤。

第一bootstrap table前端配置

//设置需要显示的列
var columns = [{
    field: 'Id',
    title: '编号'
}, {
    field: 'ProductName',
    title: '名称'
}, {
    field: 'StockNum',
    title: '库存'
}];

//bootstrap table初始化数据
$('#table').bootstrapTable({
    columns: columns,
    classes: "table table-bordered table-striped table-sm table-dark", //设置表格样式
    height:400,
    //******服务器端分页设置****
    url: "/package/bootstrap-table-1.14.1/data.json", //服务器返回数据的网址
    method: 'GET',   //数据请求方式
    sidePagination:'server',//设置服务器端分页*********************
    search:true, //******开启搜索框****//
    searchOnEnterKey:false, //******回车后执行搜索****//
    pagination:true,//开启分页
    pageNumber:1, //当前地基页
    pageSize:2, //每页显示数据条数
    pageList:"[10, 20]",
    paginationHAlign:"left",
    paginationDetailHAlign:"right",
    queryParams:function(params) {
      /******获取分页数据时，这里你可以带上你自定义的参数,bootstrap table会把这些参数合并到请求里******/
      params.action="getlist";
      params.catalogId=0;
     return params; }
    //******服务器端分页设置****
});

第二bootstrap table发送给服务器的参数

这步你无效做任何设置，用户点击下一页或者页码，bootstrap table将会把以下参数发送给服务器，服务器根据参数分页就行。 data.aspx?order=asc&offset=10&limit=10&search
data.aspx 就是上面设置的url属性,bootstrap table会自动加上?号后面的参数
注意：这个URL地址不能跨域，比如当前的域名是http://www.baidu.com,你不能把url设置成http://www.itxst.com

参数名称	说明
order	排序方式asc需要你服务器按顺序排序，desc倒序排序
offset	起始行，比如你数据库有100条数据，offset等于10表示你服务器需要从第10条数据返回结果
limit	每次读取多少条数据
search	用户在输入框搜索的关键词
queryParams	分页时你可以传入你的自定义参数，例如你想每次往服务器请求时带action="getlist"参数function(params) { return params }

第三步服务器返回的JSON格式规范

{
  "total": 20, //总共满足条件的数据数量，bootstrap table会根据这个值和你设置pageSize，自动计算出页码
  "rows": [
    {
      "Id": 1,
      "ProductName": "香蕉",
      "StockNum": "100"
    },
    {
      "Id": 2,
      "ProductName": "苹果",
      "StockNum": "200"
    },
    {
      "Id": 3,
      "ProductName": "车厘子",
      "StockNum": "2010"
    }
  ]
}

在线试一试

注：本文服务器端并没有按查询条件进行返回数据，所以点击页码都是显示同样的数据，Bootstrap Table前端配置是正确的。