实现bootstrap-table后端分页功能代码示例

这篇文章主要为大家展示了实现bootstrap-table后端分页功能代码示例,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

贵阳网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。创新互联建站于2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

本文实例讲述了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');
}

以上就是关于实现bootstrap-table后端分页功能代码示例的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。


分享标题:实现bootstrap-table后端分页功能代码示例
文章路径:http://pwwzsj.com/article/geppcc.html