解决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 相关文章推荐
jQuery中eq()方法用法实例
Jan 05 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
初学CAKEPHP 基础教程
2009/11/02 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
详解Python中的各种函数的使用
2015/05/24 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python中JWT用户认证的实现
2020/05/18 Python
python 利用toapi库自动生成api
2020/10/19 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
投标诚信承诺书
2014/05/26 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技