最近做项目接触到bootstrap分页,期初使用bootstrap自带的分页,由于后台数据量太大了,为了降低数据库的压力,最后决定采取后端分页。
前端分页
$('#openFanPushModeListTable').bootstrapTable('destroy').bootstrapTable({ url: "{% url 'mold:query_data' menu_dic %}", method: 'GET', search_: '在结果中进行检索', search: true, pagination: true, columns: [ { field: 'corner_number', title: '接角编号', }, { field: 'materiel_number', title: '物料编号', }, { field: 'gum_name', title: '胶料代号' }, ], });
前端分页json格式:[{"id":1,"corner_number":"张三","materiel_number":20,"gum_name":8888},{"id":1,"corner_number":"张三","materiel_number":20,"gum_name":8888},{"id":1,"corner_number":"张三","materiel_number":20,"gum_name":8888}]
后端分页
$('#openFanPushModeListTable').bootstrapTable('destroy').bootstrapTable({ url: "{% url 'mold:query_data' menu_dic%}", method: 'GET', height: 550, //设置为 true 会有隔行变色效果 striped: true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性 cache: false, {#search_: '在结果中进行检索',#}//后端分页自带的search用不了,需要自己编写 {#search: true,#} datatype: "json",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行 pageNumber: 1, //初始化加载第一页,默认第一页 pagination: true,//是否分页 queryParams: queryParams,//请求服务器时所传的参数 sidePagination: 'server',//指定服务器端分页 pageSize: 10,//单页记录数 pageList: [10, 15, 20, 25],//分页步进值 //加载成功时执行 onLoadSuccess: function (data) { {#console.log("加载成功");#} }, // 加载失败时执行 onLoadError: function (status) { console.log("加载数据失败" + status); }, columns: [ { field: 'id', title: 'id', }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, ], });
后端分页json格式:
{
"total":20,//数据库总记录条数,不是返回了几条json数据,
"rows":[{
"id":1,"name":"张三","age":2},
]}