Bootstrap分页时json格式的不同

Bootstrap前后端分页时,json的差异

最近做项目接触到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},

]}

你可能感兴趣的:(Bootstrap)