bootstrap-table分页

首先引用css：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.css" />

接着接引js：

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>

提示：bootstrap-table-zh-CN这个js主要是把bootstrap中的窗体文本提示转中文。

 

写一个空的table标签即可，js可自动生成表格

<table class="table table-bordered" id="ArbetTable"></table>

 

初始化的js，放到script标签即可

var TableInit = function() {
                var oTableInit = new Object();
                //初始化Table
                oTableInit.Init = function() {
                    $('#ArbetTable').bootstrapTable('destroy'); 
                    $('#ArbetTable').bootstrapTable({
                        url: '/Interface/GetData', //请求后台的URL（*）
                        method: 'get', //请求方式（*）
                        toolbar: '#toolbar', //工具按钮用哪个容器
                        striped: true, //是否显示行间隔色
                        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true, //是否显示分页（*）
                        sortable: false, //是否启用排序
                        sortOrder: "asc", //排序方式
                        queryParams: oTableInit.queryParams, //传递参数（*）
                        sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                        pageNumber: 1, //初始化加载第一页，默认第一页
                        pageSize: 10, //每页的记录行数（*）
                        pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                        search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                        contentType: "application/x-www-form-urlencoded",
                        strictSearch: true,
                        showColumns: false, //是否显示所有的列
                        showRefresh: false, //是否显示刷新按钮
                        minimumCountColumns: 2, //最少允许的列数
                        clickToSelect: false, //是否启用点击选中行
                        height: 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                        uniqueId: "no", //每一行的唯一标识，一般为主键列
                        showToggle: false, //是否显示详细视图和列表视图的切换按钮
                        cardView: false, //是否显示详细视图
                        detailView: false, //是否显示父子表
                        columns: [{
                                field: 'ip',
                                title: '登录IP数'
                            }, {
                                field: 'userName',
                                title: '新增用户'
                            }, {
                                field: 'Sex',
                                title: '充值人数'
                            },
                             {
                                field: 'Sex',
                                title: '充值金额'
                            },
                            {
                                field: 'Sex',
                                title: '投注总额'
                            },
                            {
                                field: 'operate',
                                title: '盈亏',
                            },
                            {
                                field: 'operate',
                                title: '代理分润金额',
                            }
                        ],
                        rowStyle: function(row, index) {
                            var classesArr = ['success', 'info'];
                            var strclass = "";
                            if (index % 2 === 0) { //偶数行
                                strclass = classesArr[0];
                            } else { //奇数行
                                strclass = classesArr[1];
                            }
                            return {
                                classes: strclass
                            };
                        }, //隔行变色
                    });

                };


                //得到查询的参数
                oTableInit.queryParams = function(params) {
                    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit, //页面大小
                        offset: params.offset
                    };
                    return temp;
                };
                return oTableInit;
            };