本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下:
使用bootstrap-table实现后台分页
插件资源点击此处本站下载。
引用以下css
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="../plugins/bootstrap-table/css/bootstrap-table.css" rel="external nofollow" >
引用以下js
<script src="../plugins/jQuery/jquery-1.12.4.min.js"></script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
html
<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" > </table>
js代码
$(function () { //初始化表格 var oTable = new TableInit(); oTable.Init(); }); function TableInit() { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#userTable').bootstrapTable({ url: httpRequestUrl + '/admin/queryUserList', //请求后台的URL(*) method: 'POST', //请求方式(*) striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortOrder: "asc", //排序方式 queryParamsType: '', dataType: 'json', paginationShowPageGo: true, showJumpto: true, pageNumber: 1, //初始化加载第一页,默认第一页 queryParams: queryParams,//请求服务器时所传的参数 sidePagination: 'server',//指定服务器端分页 pageSize: 10,//单页记录数 pageList: [10, 20, 30, 40],//分页步进值 search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 silent: true, showRefresh: false, //是否显示刷新按钮 showToggle: false, minimumCountColumns: 2, //最少允许的列数 uniqueId: "id", //每一行的唯一标识,一般为主键列 columns: [{ checkbox: true, visible: false }, { field: 'id', title: '序号', align: 'center', formatter: function (value, row, index) { return index + 1; } }, { field: 'username', title: '用户账号', align: 'center', width: '230px' }, { field: 'password', title: '用户密码', align: 'center' }, { field: 'startTime', title: '开始时间', align: 'center' }, { field: 'endTime', title: '结束时间', align: 'center' }, { field: 'roleName', title: '用户角色', align: 'center' }, { field: 'operation', title: '操作', align: 'center', events: operateEvents,//给按钮注册事件 formatter: addFunctionAlty//表格中增加按钮 }], responseHandler: function (res) { //后台返回的结果 console.log(res); if(res.code == "666"){ var userInfo = res.data.list; var NewData = []; if (userInfo.length) { for (var i = 0; i < userInfo.length; i++) { var dataNewObj = { 'id': '', "username": '', 'password': '', "startTime": '', 'endTime': '', 'roleName': '', 'status': '' }; dataNewObj.id = userInfo[i].id; dataNewObj.username = userInfo[i].username; dataNewObj.password = userInfo[i].password; dataNewObj.startTime = userInfo[i].startTime.replace(/-/g,'/'); dataNewObj.endTime = userInfo[i].endTime.replace(/-/g,'/'); dataNewObj.roleName = userInfo[i].roleName; dataNewObj.status = userInfo[i].status; NewData.push(dataNewObj); } console.log(NewData) } var data = { total: res.data.total, rows: NewData }; return data; } } }); }; // 得到查询的参数 function queryParams(params) { var userName = $("#keyWord").val(); console.log(userName); var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 pageNum: params.pageNumber, pageSize: params.pageSize, username: userName }; return JSON.stringify(temp); } return oTableInit; } // 表格中按钮 function addFunctionAlty(value, row, index) { var btnText = ''; btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"resetPassword(" + "'" + row.id + "'" + ")\" style='width: 77px;' class=\"btn btn-default-g ajax-link\">重置密码</button> "; btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"openCreateUserPage(" + "'" + row.id + "'" + "," + "'编辑')\" class=\"btn btn-default-g ajax-link\">编辑</button> "; btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"changeStatus(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">关闭</button> "; btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"deleteUser(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">删除</button> "; return btnText; } //刷新表格 function getUserList() { $("#userTable").bootstrapTable('refresh'); }
PS:关于bootstrap布局,这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用:
在线bootstrap可视化布局编辑工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。
- 本文固定链接: https://zxbcw.cn/post/187743/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)