Bootstrap table分页问题汇总


Posted in Javascript onMay 30, 2016

首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读。

问题1 :服务器端取不到form值,querystring没有问题,但是request.form取不到值

解决:这是ajax的问题,原代码使用原生的ajax。   1可以用读流文件解决。2 如果想用request.form 方式,设置  contentType: "application/x-www-form-urlencoded",

$('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",

问题2: 设置传递到服务器的参数

方法:

function queryParams(params) {

return {
pageSize: params.limit,

pageNumber: params.pageNumber,

UserName: 4

};

}

 $('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true, 

queryParams: queryParams,

问题3: 后台取不到 pageSize 信息

 解决:

1、在queryParams中设置

 2、在bootstrap-table.minjs文件 修改源文件为"limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

修改 bootstrap-table.js 也可以

if (this.options.queryParamsType === 'limit') {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
};
if (this.options.pagination) {
params.limit = this.options.pageSize;

params.pageNumber=this.options.pageNumber,
params.offset = this.options.pageSize * (this.options.pageNumber - 1);
}
}

配置加入  "queryParamsType": "limit",

 完整:

<script type="text/javascript">




$(document).ready(function() {
 $('#tableList').bootstrapTable({
method: 'post',
url: "getcompapylist",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
pageSize: 10,
pageNumber:1,
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框(选择显示的列)
sidePagination: "server", //服务端请求
queryParams: queryParams,
//minimunCountColumns: 2,
responseHandler: responseHandler,
columns: [
{
field: 'CompanyId',

checkbox: true

},
{
field: 'qq',

title: 'qq',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}
,
{
field: 'companyName',

title: '姓名',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}
]
});

});
function responseHandler(res) {


if (res.IsOk) {
var result = b64.decode(res.ResultValue);

var resultStr = $.parseJSON(result);
return {
"rows": resultStr.Items,
"total": resultStr.TotalItems
};

} else {
return {
"rows": [],
"total": 0
};
}

}

//传递的参数

function queryParams(params) {

return {
pageSize: params.limit,

pageNumber: params.pageNumber,

UserName: 4

};

}
</script>

问题4:分页后,重新搜索的问题

前提:自定义搜索且有分页功能,比如搜索产品名的功能.

现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果.  也就是重新搜索后,pagenumber没有变.

 解决:重新设置option就行了.

function search(){

 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10});

}

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 #Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 #Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 #Javascript
js实现页面a向页面b传参的方法
May 29 #Javascript
浅析jQuery中使用$所引发的问题
May 29 #Javascript
You might like
php实现读取内存顺序号
2015/03/29 PHP
详解PHP数组赋值方法
2015/11/07 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
js中有关IE版本检测
2012/01/04 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
python中dir函数用法分析
2015/04/17 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python get获取页面cookie代码实例
2018/09/12 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
五一劳动节慰问信
2015/02/14 职场文书
大学感恩节活动总结
2015/05/05 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
MySQL分区表管理命令汇总
2022/03/21 MySQL
Redis数据同步之redis shake的实现方法
2022/04/21 Redis