Bootstrap表格插件Bootstrap Table配置教程

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前端配置是正确的。

Catalog
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式