Bootstrap分页时json格式的不同

最新推荐文章于 2024-07-31 16:24:40 发布

原创最新推荐文章于 2024-07-31 16:24:40 发布 · 置顶 · 454 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文对比了Bootstrap前端分页与后端分页的实现方式及JSON数据格式的差异。前端分页直接处理所有数据，而后端分页通过服务器处理分页逻辑，减轻数据库压力。后端分页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},

]}