bootstrap-table后端分页功能完整实例

本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下：

使用bootstrap-table实现后台分页

插件资源点击此处本站下载。

引用以下css

引用以下js

html

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 += "重置密码  ";
 
  btnText += "编辑  ";
 
  btnText += "关闭  ";
 
  btnText += "删除  ";
 
  return btnText;
}
 
//刷新表格
function getUserList() {
  $("#userTable").bootstrapTable('refresh');
}

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

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

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