bootstarp table -- 分页数据显示

最新推荐文章于 2021-11-03 15:46:14 发布

坏事走开

最新推荐文章于 2021-11-03 15:46:14 发布

阅读量1.5k

点赞数

分类专栏： Boot Strap Tab 文章标签： bootstarp table - 分页显示

本文链接：https://blog.csdn.net/weixin_38297879/article/details/84750529

版权

Boot Strap Tab 专栏收录该内容

4 篇文章 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中的数据

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

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>
    <!--@*1、Jquery组件引用*@-->
    <script src="../../../js/jquery-1.11.3.min.js"></script>

    <!--@*2、bootstrap组件引用*@-->
    <script src="../../js/bootstrap.min.js"></script>
    <link href="../../css/bootstrap.min.css" rel="stylesheet"/>

    <!--@*3、bootstrap table组件以及中文包的引用*@-->
    <script src="../../js/bootstrap-table.js"></script>
    <link href="../../css/bootstrap-table.css" rel="stylesheet"/>

    <script src="../../js/bootstrap-table-zh-CN.js"></script>

    <!--@*4、页面Js文件的引用*@-->
    <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>

坏事走开

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstarp table -- 分页数据显示

在bootstarp table 中，进行数据分页的显示，在使用分页的时候，bootStarp table 提供了两种方式，在这里我们介绍客户端(client)进行数据的分页，希望大神能给我留言，指出这两种方式的区别。在上一篇bootstarp table的介绍中，我们已经实现了在前端页面请求指定的json文件，然后可以将数据回显，下面将json文件中的数据修改成下面的方式{ "p...
复制链接

扫一扫