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

<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" >

<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>

<table id="usertable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" >
</table>

$(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');
}