解决JS组件bootstrap table分页实现过程中遇到的问题
本文为大家分享了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、设置传递到服务器的参数
方法：
functionqueryParams(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",
完整
<scripttype="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
}
]
});
});
functionresponseHandler(res){
if(res.IsOk){
varresult=b64.decode(res.ResultValue);
varresultStr=$.parseJSON(result);
return{
"rows":resultStr.Items,
"total":resultStr.TotalItems
};
}else{
return{
"rows":[],
"total":0
};
}
}
//传递的参数
functionqueryParams(params){
return{
pageSize:params.limit,
pageNumber:params.pageNumber,
UserName:4
};
}
</script>
问题4、分页后,重新搜索的问题
前提:自定义搜索且有分页功能,比如搜索产品名的功能.
现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变.
解决:重新设置option就行了.
functionsearch(){
$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});
}
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助。