解决JS组件bootstrap table分页实现过程中遇到的问题


Posted in Javascript onApril 21, 2016

本文为大家分享了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});

}

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
vue-hook-form使用详解
Apr 07 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
Javascript Promise用法详解
May 10 Javascript
微信小程序实现日历功能
Nov 27 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
javascript常见数字进制转换实例分析
Apr 21 #Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 #Javascript
动态加载js文件简单示例
Apr 21 #Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 #Javascript
jQuery插件datatables使用教程
Apr 21 #Javascript
JavaScript预解析及相关技巧分析
Apr 21 #Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 #Javascript
You might like
php采集速度探究总结(原创)
2008/04/18 PHP
二招解决php乱码问题
2012/03/25 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
Python try except finally资源回收的实现
2021/01/25 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
党员干部承诺书范文
2014/03/25 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
2019新员工心得体会
2019/06/25 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书