Bootstrap table学习笔记（2） 前后端分页模糊查询
作者：邓晓晖 发布时间：2024-04-29 13:12:22
标签：Bootstrap,table,分页
在使用过程中，一边看文档一边做，遇到了一些困难的地方，在此记录一下，顺便做个总结：
1、前端分页
2、后端分页
3、模糊查询
前端分页相当简单，在我添加了2w条测试数据的时候打开的很流畅，没有卡顿。
$(function(){
a();
});
function a () {
$('#yourtable').bootstrapTable({
url: "/user/getUserList/",
method:"post",
dataType: "json",
striped:true,//隔行变色
cache:false, //是否使用缓存
showColumns:false,// 列
pagination: true, //分页
sortable: false, //是否启用排序
singleSelect: false,
search:false, //显示搜索框
buttonsAlign: "right", //按钮对齐方式
showRefresh:false,//是否显示刷新按钮
sidePagination: "client", //客户端处理分页服务端：server
pageNumber:"1",//启用插件时默认页数
pageSize:"15",//启用插件是默认每页的数据条数
pageList:[10, 25, 50, 100],//自定义每页的数量
undefinedText:'--',
uniqueId: "id", //每一行的唯一标识，一般为主键列
queryParamsType:'',
columns: [
{
title: 'ID',
field: 'id',
align: 'center',
valign: 'middle',
},
{
title: '用户姓名',
field: 'name',
align: 'center',
valign: 'middle',
},
{
title: '性别',
field: 'sex',
align: 'center',
},
{
title: '用户账号',
field: 'username',
align: 'center',
},
{
title: '手机号',
field: 'phone',
align: 'center',
},
{
title: '邮箱',
field: 'email',
align: 'center',
},
{
title: '权限',
field: 'rolename',
align: 'center',
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
//value 能够获得当前列的值
//====================================
var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</button> ';
var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">删除</button> ';
return e+d;
}
}
]
});
}
考虑到以后的数据会越来越多，前端分页在数据量大的情况下，明显不能满足要求，因此必须要做后端的分页
首先：
sidePagination: "server",//服务器分页
queryParams: queryParams,//传递参数（*）
//得到查询的参数
function queryParams (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.pageSize, //页面大小
pageNumber: params.pageNumber, //页码
username: $("#search_username").val(),
name:$("#search_name").val(),
sex:$("#search_sex").val(),
phone:$("#search_mobile").val(),
email:$("#search_email").val(),
};
return temp;
};
这里传入了每页显示的条数、以及当前的页数。如果需要查询，则需要传入需要查询的条件。
具体的js如下：
$(function(){
a();
});
function a () {
$('#userListTable').bootstrapTable({
url: "/user/getUserList/",
method:"post",
dataType: "json",
contentType: "application/x-www-form-urlencoded",
striped:true,//隔行变色
cache:false, //是否使用缓存
showColumns:false,// 列
toobar:'#toolbar',
pagination: true, //分页
sortable: false, //是否启用排序
singleSelect: false,
search:false, //显示搜索框
buttonsAlign: "right", //按钮对齐方式
showRefresh:false,//是否显示刷新按钮
sidePagination: "server", //服务端处理分页
pageNumber:"1",
pageSize:"15",
pageList:[10, 25, 50, 100],
undefinedText:'--',
uniqueId: "id", //每一行的唯一标识，一般为主键列
queryParamsType:'',
queryParams: queryParams,//传递参数（*）
columns: [
{
title: 'ID',
field: 'id',
align: 'center',
valign: 'middle',
},
{
title: '用户姓名',
field: 'name',
align: 'center',
valign: 'middle',
},
{
title: '性别',
field: 'sex',
align: 'center',
},
{
title: '用户账号',
field: 'username',
align: 'center',
},
{
title: '手机号',
field: 'phone',
align: 'center',
},
{
title: '邮箱',
field: 'email',
align: 'center',
},
{
title: '权限',
field: 'rolename',
align: 'center',
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</button> ';
var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">删除</button> ';
return e+d;
}
}
]
});
//得到查询的参数
function queryParams (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.pageSize, //页面大小
pageNumber: params.pageNumber, //页码
username: $("#search_username").val(),
name:$("#search_name").val(),
sex:$("#search_sex").val(),
phone:$("#search_mobile").val(),
email:$("#search_email").val(),
};
return temp;
};
}
//搜索
function serachUser() {
$("#userListTable").bootstrapTable('refresh');
}
*值得注意的是：
contentType: "application/x-www-form-urlencoded",//因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。
以及：
HTML:
<div id="page-content" class="animated fadeInRight">
<div class="col-sm-4 col-md-3 col-lg-3" style="width: 100％;">
<form id="search_User">
<div class="panel-body search_box">
<div class="search_div">
<label for="search_name">用户姓名：</label>
<input type="text" class="form-control" id="search_name" name="UserV2.name" >
</div>
<div class="search_div">
<label for="search_mobile">手机号：</label>
<input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >
</div>
<div class="search_div">
<label for="search_sex">性别：</label>
<select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---请选择---</option><option value="男">男</option><option value="女">女</option></select>
</div>
</div>
<div class="panel-body search_box">
<div class="search_div">
<label for="search_name">用户账号：</label>
<input type="text" class="form-control" id="search_username" name="UserV2.username" >
</div>
<div class="search_div">
<label for="search_name">用户Email：</label>
<input type="text" class="form-control" id="search_email" name="UserV2.email" >
</div>
<div class="search_div" style="text-align: center;">
<input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
</div>
</div>
</form>
</div>
<table id="userListTable" ></table>
</div>
不论是初始化表格还是搜索的时候传入后台的数据如下：
pageSize=15 pageNumber=1 username= name= sex= phone= email=
返回数据：
我们要返回两个值： rows total
rows:我们查询到的数据
total:数据总数（此总数指的是所有数据的总数，并不是单页的数量，比如说我有user表中有100条数据，我的limit 0,15，所以我的rows中有15条数据，但是total=100）
{
"total": 2,
"rows": [
{
"email": "39385908@qq.com",
"id": 1,
"name": "邓某某",
"password": "",
"phone": "12345678911",
"rolename": "平台管理员",
"sex": "男",
"username": "admin"
},
{
"email": "2222@222.com",
"id": 8,
"name": "王小二1",
"password": "",
"phone": "13245678910",
"rolename": "",
"sex": "男",
"username": "admin2"
}
]
}
有了total总数，加上之前的pageSize以及rows，bootStraptable会为我们自动生成和分页有关的元素：
效果图：
0
投稿猜你喜欢
DNA序列ACTGATCGATTACGTATAGTATTTGCTATCATACATATATATCGATGCGTTCAT求其互补DNA序列。在- 网页路径问题可以说是在页面设计或程序中比较典型的问题，处理得不好会给你的带来很大的麻烦，如何才能彻底解决路径问题呢！asp之家为你特别准备了
- vue+el使用this.$confirm不能阻断代码往下执行在vue+element ui的前端框架中使用el的confirm弹窗，遇到一
- 前言PHP 中有个释放变量的语句叫做unset（从PHP4开始unset已经不再是一个函数了，而是一个语句），本文主要给大家介绍了关于php
- 这篇文章主要介绍了python类继承和多态原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 目录介绍Python连接MySQL实现数据储存总结介绍MySQL是一个关系型数据库，MySQL由于性能高、成本低、可靠性好，已经成为最流行的
- python遍历迭代器自动链式处理数据pytorch.utils.data可兼容迭代数据训练处理，在dataloader中使用提高训练效率：
- 1.什么是FBV和CBVFBV是指视图函数以普通函数的形式；CBV是指视图函数以类的方式。2.普通FBV形式def index(reques
- 无意中在csdn上看到一帖有关绘制杨辉三角的sql表达式，感觉很有意思。后来自己想下不借助临时表，根据杨辉三角的组合数计算方法C(n,m)=
- Confusion Matrix在机器学习领域，混淆矩阵（confusion matrix），又称为可能性表格或是错误矩阵。它是一种特定的矩
- 一、准备工作安装最新的Go1、由于Google被墙的原因，如果没有VPN的话，就到这里下载：http://www.golangtc.com/
- 本文实例讲述了Python3.4类型判断，异常处理，终止程序操作。分享给大家供大家参考，具体如下：python3.4学习笔记 类型判断，异常
- 已解决selenium模块利用performance获取network日志请求，抛出异常selenium.common.exceptions
- 如下所示：# 计算0到100之间的之间所有的数字累计求和结果# 定义最终结果的变量result = 0# 定义一个整数的变量来记录循环次数i
- 曾有位网友遇到这样一个问题：产品名称为“A&T Plastic”，在产品列表中需要做这样的超链接，<a href="
- 前言JSON是一种轻量级的数据交换格式。易于阅读和编写。 golang 提供了 encoding/json 包来操作JSON数据。1. 结构
- 和YSlow一样，“Page Speed”也是一个基于firebug附加组件的FireFox插件。虽然听起来有点拗口，但是意思很容易理解：如
- 。（新手可能认为setTimeout与setInterval是javascript函数，这是错误的。新手容易将javascript对象函数与
- 简介LRU(Least Recently Used)最近最少使用，最近有时间和空间最近的歧义，所以我更喜欢叫它近期最少使用算法。它的核心思想
- 1.将ipynd编译成tex建议将其放在桌面处理ipython nbconvert —to latex pdf.ipynb2.修改tex双击
