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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
vue如何从接口请求数据
Jun 22 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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中函数内引用全局变量的方法
2008/10/20 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
web前端开发也需要日志
2010/12/09 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
利用python清除移动硬盘中的临时文件
2020/10/28 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
优秀实习生感言
2014/03/01 职场文书
黄金酒广告词
2014/03/21 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
土地转让协议书
2014/09/27 职场文书
先进事迹材料范文
2014/12/29 职场文书
庆七一主持词
2015/06/29 职场文书
教师节晚会主持词
2015/06/30 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技