欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-25 12:43:01
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下:使用bootstrap-table实现后台分页插件资源点击此处。引用以下css

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

使用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可视化布局编辑工具:

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