解决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 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
安装APACHE
2007/01/15 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
javascript call和apply方法
2008/11/24 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
儿童编程python入门
2018/05/08 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
物业管理个人自我评价
2013/11/08 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
四年级学生评语大全
2014/04/21 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
离婚被告答辩状
2015/05/22 职场文书
行政上诉状范文
2015/05/23 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers