本文实例讲述了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>&nbsp;&nbsp;"; btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"openCreateUserPage(" + "'" + row.id + "'" + "," + "'编辑')\" class=\"btn btn-default-g ajax-link\">编辑</button>&nbsp;&nbsp;"; btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"changeStatus(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">关闭</button>&nbsp;&nbsp;"; btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"deleteUser(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">删除</button>&nbsp;&nbsp;"; return btnText;} //刷新表格function getUserList() { $("#userTable").bootstrapTable('refresh');}

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。