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两种跨域技术全面介绍
Apr 16 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP的基本常识小结
2013/07/05 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
python求pi的方法
2014/10/08 Python
Python实现线程池代码分享
2015/06/21 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
把pandas转换int型为str型的方法
2019/01/29 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python logging设置和logger解析
2019/08/28 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
django教程如何自学
2020/07/31 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
《手指教学》反思
2014/02/14 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
集中采购方案
2014/06/10 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书