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 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 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编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php实现网站留言板功能
2015/11/04 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP进程通信基础之信号
2017/02/19 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python内存动态分配过程详解
2019/07/15 Python
Django--权限Permissions的例子
2019/08/28 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
为什么会有内存对齐
2016/10/10 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
文体活动总结范文
2014/05/05 职场文书
企业党员一句话承诺
2014/05/30 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
安全演讲稿开场白
2014/08/25 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
初中语文教学研修日志
2015/11/13 职场文书