解决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 原型模式实现OOP的再研究
Apr 09 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
更正确的asp冒泡排序
2007/05/24 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
python结合API实现即时天气信息
2016/01/19 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
const和static readonly区别
2013/05/20 面试题
公司领导推荐信
2013/11/12 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
学校督导评估方案
2014/06/10 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android