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 相关文章推荐
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
微信小程序分享海报生成的实现方法
Dec 10 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
关于页面优化和伪静态
2009/10/11 PHP
php 问卷调查结果统计
2015/10/08 PHP
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript中string对象
2015/06/12 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
js评分组件使用详解
2017/06/06 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
python3.5使用tkinter制作记事本
2016/06/20 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python实现图片识别加翻译功能
2019/12/26 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
古汉语文学求职信范文
2014/03/16 职场文书
护士医德考评自我评价
2015/03/03 职场文书
工程技术员岗位职责
2015/04/11 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技