解决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 事件绑定问题
Jan 01 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript闭包入门示例
Apr 30 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
vue组件间通信解析
Mar 01 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
vue2 设置router-view默认路径的实例
Sep 20 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
Vue3.x源码调试的实现方法
Oct 13 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
第六节--访问属性和方法
2006/11/16 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
初学JavaScript第二章
2008/09/30 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python绘制随机网络图形示例
2019/11/21 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
Ajax的优点和缺点
2014/11/21 面试题
《陈涉世家》教学反思
2014/04/12 职场文书
机械系毕业生求职信
2014/05/28 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
ktv好的活动方案
2014/08/17 职场文书
员工工作自我评价
2014/09/26 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang