php bootstrap 分页 查询,深入了解Bootstrap table表格插件(二)前后端分页模糊查询...

这篇文章主要为大家分享了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 = '编辑 ';

var d = '删除 ';

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 = '编辑 ';

var d = '删除 ';

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参数映射是获取不到的。以及:

8ae3380bb594a71799b41f3b8f7a0ab5.png

HTML:

用户姓名:

手机号:

性别:

---请选择---男女

用户账号:

用户Email:

不论是初始化表格还是搜索的时候传入后台的数据如下:

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会为我们自动生成和分页有关的元素:

效果图:

51614c4c27285fb36d43e5e92f1e0ddb.png

【相关推荐】

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值