首先引用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; };