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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
ng-zorro-antd 入门初体验
Dec 03 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+MySQL 制作简单的留言本
2009/11/02 PHP
深入php self与$this的详解
2013/06/08 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
浅谈php冒泡排序
2014/12/30 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python判断变量是否为列表的方法
2020/09/17 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
三年级音乐教学反思
2014/01/28 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
2014年终个人工作总结
2014/11/07 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python