解决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 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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函数func_num_args用法实例分析
2015/12/07 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
js判断是否是手机页面
2017/03/17 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
Python 解析XML文件
2009/04/15 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
电视购物广告词
2014/03/19 职场文书
三方合作协议书范本
2014/04/18 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
员工生日会策划方案
2014/06/14 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
python基础详解之if循环语句
2021/04/24 Python