bootstarp table -- 分页数据显示

我会带着你远行 2022-04-12 11:23 380阅读 0赞

在bootstarp table 中，进行数据分页的显示，在使用分页的时候，bootStarp table 提供了两种方式，在这里我们介绍 客户端(client)进行数据的分页，希望大神能给我留言，指出这两种方式的区别。

在上一篇bootstarp table的介绍中，我们已经实现了在前端页面请求指定的json文件，然后可以将数据回显，下面将json文件中的数据修改成下面的方式

{
      "page": 4,
      //  在bootstarp 中的底层会自动获取 rows中的数据
      "rows": [
        {
          "Level": "lisi",
          "ParentName": "456",
          "Name": "李四",
          "title": 3,
          "Desc": "0"
        },
        {
    
          "Level": "wangwu",
          "ParentName": "789",
          "Name": "王五",
          "title": 4,
          "Desc": "0"
        },
        {
    
          "Level": "zhaoliu",
          "ParentName": "111",
          "Name": "赵六",
          "title": 5,
          "Desc": "0"
        },
        {
    
          "Level": "fanqi",
          "ParentName": "222",
          "Name": "范七",
          "title": 6,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        },
        {
    
          "Level": "maoba",
          "ParentName": "333",
          "Name": "毛八",
          "title": 7,
          "Desc": "0"
        }
      ],
    //   数据的总个数
      "total": 50
    }

在文档中的page 和total 在这里并没有使用到，因为使用的是客户端（client）分页显示，所以只会用到rows，因为在bootstarp table的js文件中，默认获取的数据就是rows中的数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70][]

进行设置完成之后，数据就会自动的展示出分页的数据，并且分页的组件，前提是需要设置

pagination: false,                   //是否显示分页（*）

设置上面的属性才可以完成数据的分页展示

核心配置

$(function () {
    
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
        // $.get("data.json", function (datas) {
        //     $('#tb_departments').bootstrapTable("load", datas)
        // })
    
        // oTable.on("load-success.bs.table",function (data) {
        //     console.log("load success");
        //     $(".pull-right").css("display", "block");
        // })
    
    });
    
    
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: "data.json",
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                // sortOrder: "asc",                   //排序方式
                // 获取到的是全部的数据
                // responseHandler: function (res) {
                //     return res;
                // },
                // 设置分页按钮的名称
                paginationPreText: '上一页',
                paginationNextText: '下一页',
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*） 在设置的时候，会在底层进行数据的判断，进行数据的设置，如果是client就会执行别的数据
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                // 用于设置每页显示的分页显示的数据
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,               //是否显示父子表
                columns: [{
                    checkbox: true,
                }, {
                    field: 'Name',
                    title: '部门名称',
                    formatter: nameMatter
                }, {
                    field: 'ParentName',
                    title: '上级部门'
                }, {
                    field: 'Level',
                    title: '部门级别'
                }, {
                    field: 'Desc',
                    title: '描述'
                }]
            });
        };
    
        return oTableInit;
    
    
        function nameMatter(a1, a2, a3, a4) {
            console.log("a1:" + a1 + "...a2:" + a2 + "...a3:" + a3 + "...a4:" + a4)
            console.log(arguments.length)
            return a1;
        }
    };

页面数据

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <title>BootStrap Table使用</title>
        
        <script src="../../../js/jquery-1.11.3.min.js"></script>
    
        
        <script src="../../js/bootstrap.min.js"></script>
        <link href="../../css/bootstrap.min.css" rel="stylesheet"/>
    
        
        <script src="../../js/bootstrap-table.js"></script>
        <link href="../../css/bootstrap-table.css" rel="stylesheet"/>
    
        <script src="../../js/bootstrap-table-zh-CN.js"></script>
    
        
        <script src="index.js"></script>
    </head>
    <body>
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_statu">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
    
    
        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-12">
                <div>
                    <table id="tb_departments"></table>
                </div>
            </div>
        </div>
    </div>
    <table id="table"></table>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70]: /images/20220412/80e211c59f4a44a9bcfafed8584c6581.png