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各浏览器中option元素的表现差异
Apr 07 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序制作扭蛋机代码实例
Sep 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教程 插件机制在PHP中实现方案
2012/11/02 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
.NET常见笔试题集
2012/12/01 面试题
服务承诺书范文
2014/05/19 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL