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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Bootstrap实现模态框效果
Sep 30 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
php全局变量和类配合使用深刻理解
2013/06/05 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
javascript 获取图片颜色
2009/04/05 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python科学计算之narray对象用法
2019/11/25 Python
python内置模块collections知识点总结
2019/12/19 Python
Pytorch to(device)用法
2020/01/08 Python
Python基于requests库爬取网站信息
2020/03/02 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
工业设计专业推荐信
2013/10/29 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
青岛海底世界导游词
2015/02/11 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
关于python中模块和重载的问题
2021/11/02 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python