BootStrap table服务端分页
涉及到的内容：
1.bootstrap-table插件；
2.mybatisplus分页查询；
3.spring封装对象匹配bootstrap-table插件格式；
4.sql查询隐藏手机号中间四位。
让我们开始：
1.想要实现bootstrap 表格服务端分页，首先需要使用插件
bootstrap-table.min.css
bootstrap-table.min.js
bootstrap-table-zh-CN.js
页面上的引用是这样的
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap表格</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap-table-object.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<h1>表格</h1>
<div class="container">
<div class="">
<table class="table table-striped table-bordered table-hover" id="userTable">
</table>
<div class="clear"></div>
</div>
</div>
</body>
</html>
index.js
var MgrUser = {
id: "userTable",//表格id
seItem: null, //选中的条目
table: null,
layerIndex: -
};
/**
* 初始化表格的列
*/
MgrUser.initColumn = function () {
var columns = [
{title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'},
{title: '姓名', field: 'user_name', align: 'center', valign: 'middle', sortable: true},
{title: '电话', field: 'mobile', align: 'center', valign: 'middle', sortable: true},
{title: '时间', field: 'last_login_time', align: 'center', valign: 'middle', sortable: true},
{title: '状态', field: 'status', align: 'center', valign: 'middle', sortable: true}];
return columns;
};
$(function () {
var defaultColunms = MgrUser.initColumn();
var table = new BSTable("userTable", "http://localhost/abc/def", defaultColunms);
table.setPaginationType("server");
MgrUser.table = table.init();
});
bootstrap-table-object.js
/**
* 初始化 BootStrap Table 的封装
*
* 约定：toolbar的id为 (bstableId + "Toolbar")
*
* @author fengshuonan
*/
(function () {
var BSTable = function (bstableId, url, columns) {
this.btInstance = null; //jquery和BootStrapTable绑定的对象
this.bstableId = bstableId;
this.url = url;
this.method = "post";
this.paginationType = "server"; //默认分页方式是服务器分页,可选项"client"
this.toolbarId = bstableId + "Toolbar";
this.columns = columns;
this.height = ; //默认表格高度665
this.data = {};
this.queryParams = {}; // 向后台传递的自定义参数
}; BSTable.prototype = {
/**
* 初始化bootstrap table
*/
init: function () {
var tableId = this.bstableId;
var me = this;
this.btInstance =
$('#' + tableId).bootstrapTable({
contentType: "application/x-www-form-urlencoded",
url: this.url, //请求地址
method: this.method, //ajax方式,post还是get
ajaxOptions: { //ajax请求的附带参数
data: this.data
},
/* responseHandler: function (res) {//获取多级json
return res.data.records
}, */
toolbar: "#" + this.toolbarId,//顶部工具条
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
pageNumber: , //初始化加载第一页，默认第一页
pageSize: , //每页的记录行数（*）
pageList: [, , ], //可供选择的每页的行数（*）
queryParamsType: 'limit', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
queryParams: function (param) {
return $.extend(me.queryParams, param);
}, // 向后台传递的自定义参数
sidePagination: this.paginationType, //分页方式：client客户端分页，server服务端分页（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: , //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
columns: this.columns, //列数组
pagination: true, //是否显示分页条
height: this.height,
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline'
});
return this;
},
/**
* 向后台传递的自定义参数
* @param param
*/
setQueryParams: function (param) {
this.queryParams = param;
},
/**
* 设置分页方式：server 或者 client
*/
setPaginationType: function (type) {
this.paginationType = type;
}, /**
* 设置ajax post请求时候附带的参数
*/
set: function (key, value) {
if (typeof key == "object") {
for (var i in key) {
if (typeof i == "function")
continue;
this.data[i] = key[i];
}
} else {
this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
}
return this;
}, /**
* 设置ajax post请求时候附带的参数
*/
setData: function (data) {
this.data = data;
return this;
}, /**
* 清空ajax post请求参数
*/
clear: function () {
this.data = {};
return this;
}, /**
* 刷新 bootstrap 表格
* Refresh the remote server data,
* you can set {silent: true} to refresh the data silently,
* and set {url: newUrl} to change the url.
* To supply query params specific to this request, set {query: {foo: 'bar'}}
*/
refresh: function (parms) {
if (typeof parms != "undefined") {
this.btInstance.bootstrapTable('refresh', parms);
} else {
this.btInstance.bootstrapTable('refresh');
}
}
}; window.BSTable = BSTable; }());
2.mybatisplus分页
代码片段：
Page<UserInfo> page = new PageFactory<UserInfo>().defaultPage();
EntityWrapper<UserInfo> entityWrapper = new EntityWrapper<UserInfo>();
entityWrapper.setSqlSelect("user_name","insert(mobile, 4, 4, '****') as mobile","IF(status = 0,'未签到','已签到') as status","last_login_time");
entityWrapper.eq("manager_tel",managerTel);
Page<Map<String, Object>> userPages = userInfoService.selectMapsPage(page,entityWrapper);
return new PageInfoBT<>(userPages);
其中，PageFactory类是用来接收bootstrap-table传递的参数：
public class PageFactory<T> {
public Page<T> defaultPage() {
HttpServletRequest request = HttpContext.getRequest();
int limit = Integer.valueOf(request.getParameter("limit")); //每页多少条数据
int offset = Integer.valueOf(request.getParameter("offset")); //每页的偏移量(本页当前有多少条)
String sort = request.getParameter("sort"); //排序字段名称
String order = request.getParameter("order"); //asc或desc(升序或降序)
if (ToolUtil.isEmpty(sort)) {
Page<T> page = new Page<>((offset / limit + ), limit);
page.setOpenSort(false);
return page;
} else {
Page<T> page = new Page<>((offset / limit + ), limit, sort);
if (Order.ASC.getDes().equals(order)) {
page.setAsc(true);
} else {
page.setAsc(false);
}
return page;
}
}
}
使用mybatisplus的好处就是可以不写sql，像这样：
EntityWrapper<UserInfo> entityWrapper = new EntityWrapper<UserInfo>();
entityWrapper.setSqlSelect("user_name","insert(mobile, 4, 4, '****') as mobile","IF(status = 0,'未签到','已签到') as status","last_login_time");
entityWrapper.eq("manager_tel",managerTel);
Page<Map<String, Object>> userPages = userInfoService.selectMapsPage(page,entityWrapper);
3.spring封装对象匹配bootstrap-table格式
PageInfoBT类用来封装对象：
public class PageInfoBT<T> {
// 结果集
private List<T> rows;
// 总数
private long total;
public PageInfoBT(Page<T> page) {
this.rows = page.getRecords();
this.total = page.getTotal();
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
}
返回的数据格式：
{
"rows":[
{
"last_login_time":"2022-11-10 19:20:10",
"user_name":"王非",
"mobile":"130****2222",
"status":"已签到"
},
{
"last_login_time":"2022-11-10 19:23:44",
"user_name":"王晓晨",
"mobile":"130****3333",
"status":"已签到"
}
],
"total":""
}
4.sql查询隐藏手机号中间四位：
SELECT
username,
insert(mobile, , , '****'),
IF(status = ,'未签到','已签到') as status,
time
FROM
user
BootStrap table服务端分页的更多相关文章
- asp.net mvc bootstrap datatable 服务端分页
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...
- asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载 密码:0ea1 先上图[ jqueryui风格] ...
- bootstrap Table 服务端处理分页 后台是.net
要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType ...
- AntDesign vue学习笔记（八）Table服务端分页使用
本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...
- BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...
- AngularJS中实现服务端分页
这个教程将介绍在AngularJS应用中的服务端分页处理.在任何涉及到列表或表格数据的应用中都可能会用到分页. 概念 当我们处理异步分页时,每次只从服务器上获取一页数据.也就是说当用户点击第二页,就只 ...
- datatable.js 服务端分页+fixColumns列固定
前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
- 关于bootstrap table的server分页
首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ u ...
随机推荐
- 图论 - 图的深度优先遍历c++实现
图的深度优先遍历c++实现 深度优先搜索 邻接矩阵的创建 int i, j, m, a, b; cin >> n >> m; //初始化二维矩阵 for (i = 1; i & ...
- 项目Beta冲刺（团队）——博客集合
项目Beta冲刺(团队)--博客集合 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:集中记录所有Beta敏捷冲刺日志的集 ...
- wordpress数字分页列表导航实现
前面我们用了自定义的方式来实现wordpress数字分页,其实wordpress是已经有集成了Numbered Pagination相关的函数,我们直接调用就可以.具体实现方法如下代码调用 <? ...
- HTTP权威指南 目录
diyi部分 HTTP:Web的基础 第1章 HTTP概述 31.1 HTTP——因特网的多媒体信使 41.2 Web客户端和服务器 41.3 资源 51.3.1 媒体类型 61.3.2 URI 71 ...
- 几种开放源码的TCP/IP协议栈比较
http://blog.chinaunix.net/uid-28785506-id-3828286.html 原文地址:几种开放源码的TCP/IP协议栈比较 作者:三点水兽 1.BSD TCP/IP协 ...
- python - 全局中间件（2.7）
一.场景 在网站的所有页面中可能某些地方都需要相同的数据,此时可以在Django中定义全局数据并存储在session中,或使用模板语言放入页面中 注意:一定要加上 try: 进行潜在的异常捕捉,因为一 ...
- HUSTOJ 有序表的最小和
一次奇怪的AC经历...上周被这道题卡了3天... 传送门:http://oj.gdsyzx.edu.cn/problem.php?id=1475 题目描述 给出两个长度为n的有序表A和B,在A和B中 ...
- mysql初始
数据(data) : -描述事物的符号记录称为数据,符号既可以是数据,文字,图片,声音,语言等,符号都可以经过数字化后存入计算机中 - 计算机中描述一个事物,就需要抽取这一事物的典型特征,组成一条记录 ...
- 在交互环境下使用 Pyspark 提交任务给 Spark 解决 : java.sql.SQLException: No suitable driver
在 jupyter 上启用 local 交互环境和 spark 进行交互使用 imapla 来帮助 spark 取数据却失败了 from pyspark.sql import SparkSession ...
- TCP/IP协议族基本知识
常见的网络拓扑 两台主机通信的过程:应用进程产生消息,经由主机的 TCP/IP 协议栈发送到局域网(LAN),最后经过广域网(目前最大的广域网的因特网)中的网络设备(路由器)传给目的主机所在的局域网( ...