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


Posted in Javascript onJune 01, 2020

本文实例讲述了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>  ";
 
  btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"openCreateUserPage(" + "'" + row.id + "'" + "," + "'编辑')\" class=\"btn btn-default-g ajax-link\">编辑</button>  ";
 
  btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"changeStatus(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">关闭</button>  ";
 
  btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"deleteUser(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">删除</button>  ";
 
  return btnText;
}
 
//刷新表格
function getUserList() {
  $("#userTable").bootstrapTable('refresh');
}
Javascript 相关文章推荐
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
讲解vue-router之什么是动态路由
May 28 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
微信小程序订阅消息(java后端实现)开发
Jun 01 #Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 #Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 #Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 #Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 #Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 #Javascript
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
个人简历自我评价范文
2014/02/04 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
结对共建协议书
2014/08/20 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
坎儿井导游词
2015/02/09 职场文书
Python time库的时间时钟处理
2021/05/02 Python