BootStrapTable服务器分页实例解析
项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页。之前遇到的问题时服务器分页,在服务器端接收的参数为null。查了资料发现少了参数
主要引入js
<scripttype="text/javascript"src="<%=path%>/plugins/bootstrap-table/bootstrap-table.js"></script> <scripttype="text/javascript"src="<%=path%>/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
$('#bootstrap_table')
.bootstrapTable(
{
method:'post',
url:basePath+"/XXXServlet",
<spanstyle="color:#FF0000;">contentType:"application/x-www-form-urlencoded",</span>
cache:false,
striped:true,
//height:480,
locale:'zh-CN',
sidePagination:'server',
pagination:true,
clickToSelect:true,//单击行即可以选中
sortName:'SENDTIME',//设置默认排序为SENDTIME
sortOrder:'desc',//设置排序为反序desc
pageSize:10,
pageNumber:1,
pageList:[10,20,50,100,200,500],
queryParams:function(e){
varparam={
userId:$("#userId").val(),
type:"db",
<spanstyle="color:#FF0000;">pageSize:e.limit,
pageIndex:(e.offset/e.limit)+1,
<spanstyle="color:#000000;">filterlist:$("#oms_search_type").val()</span></span>
};
returnparam;
},
search:false,
showColumns:false,
showRefresh:false,
columns:[
{
field:"ID",
title:"编号",
align:"center",
valign:"middle",
sortable:"true"
},
{
field:"NAME",
title:"名称",
align:"center",
valign:"middle",
sortable:"true"
},
{
field:"AGE",
title:"年龄",
align:"center",
valign:"middle",
sortable:"true"
},
{
title:"操作",
field:"id",
align:"center",
formatter:function(value,row,index){
vare='<ahref="#"mce_href="#"onclick="edit(\''
+row.id+'\')">编辑</a>';
vard='<ahref="#"mce_href="#"onclick="del(\''
+row.id+'\')">删除</a>';
returne+d;
}
}],
onLoadSuccess:function(data){
initUserInfo(data.userInfo);
},
formatNoMatches:function(){
return'无符合条件的记录';
},
onDblClickRow:function(row,$element){
}
});
需要注意的是红色的部分。当时post请求是,需要注意
<spanstyle="color:#FF0000;">contentType:"application/x-www-form-urlencoded",</span>
这个参数,必须要有,不然服务器获取不到参数。
以上所述是小编给大家介绍的BootStrapTable服务器分页实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!