Bootstrap table 服务器端分页功能实现方法示例
本文实例讲述了Bootstraptable服务器端分页功能实现方法。分享给大家供大家参考,具体如下:
bootstrap版本为3.X
bootstrap-table.min.css
bootstrap-table-zh-CN.min.js
bootstrap-table.min.js
前端bootstrap+jQuery,服务端使用springMVC实现restful风格服务
前端代码块
functioninitTable(){ $('#test-table').bootstrapTable({ method:'get', toolbar:'#toolbar',//工具按钮用哪个容器 striped:true,//是否显示行间隔色 cache:false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination:true,//是否显示分页(*) sortable:false,//是否启用排序 sortOrder:"asc",//排序方式 pageNumber:1,//初始化加载第一页,默认第一页 pageSize:10,//每页的记录行数(*) pageList:[10,25,50,100],//可供选择的每页的行数(*) url:"/testProject/page4list.json",//这个接口需要处理bootstraptable传递的固定参数 queryParamsType:'',//默认值为'limit',在默认情况下传给服务端的参数为:offset,limit,sort //设置为''在这种情况下传给服务器的参数为:pageSize,pageNumber //queryParams:queryParams,//前端调用服务时,会默认传递上边提到的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数 sidePagination:"server",//分页方式:client客户端分页,server服务端分页(*) //search:true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch:true, //showColumns:true,//是否显示所有的列 //showRefresh:true,//是否显示刷新按钮 minimumCountColumns:2,//最少允许的列数 clickToSelect:true,//是否启用点击选中行 searchOnEnterKey:true, columns:[{ field:'id', title:'id', align:'center' },{ field:'testkey', title:'测试标识', align:'center' },{ field:'testname', title:'测试名字', align:'center' },{ field:'id', title:'操作', align:'center', formatter:function(value,row,index){ //通过formatter可以自定义列显示的内容 //value:当前field的值,即id //row:当前行的数据 vara='测试'; } }], pagination:true }); }
在前端通过请求获取table数据时,bootstraptable会默认拼一个searchText的参数,来支持查询功能。
服务端代码
@RequestMapping(value="/page4list.json") publicvoidpage4list(IntegerpageSize,IntegerpageNumber,StringsearchText,HttpServletRequestrequest, HttpServletResponseresponse){ //搜索框功能 //当查询条件中包含中文时,get请求默认会使用ISO-8859-1编码请求参数,在服务端需要对其解码 if(null!=searchText){ try{ searchText=newString(searchText.getBytes("ISO-8859-1"),"UTF-8"); }catch(Exceptione){ e.printStackTrace(); } } //在service通过条件查询获取指定页的数据的list Listlist=mwMsgQueueService.page4List(pageSize,pageNumber,searchText); //根据查询条件,获取符合查询条件的数据总量 inttotal=mwMsgQueueService.queryCountBySearchText(searchText); //自己封装的数据返回类型,bootstrap-table要求服务器返回的json数据必须包含:totlal,rows两个节点 PageResultForBootstrappage=newPageResultForBootstrap(); page.setTotal(total); page.setRows(list); //page就是最终返回给客户端的数据结构,可以直接返回给前端 //下边这段,只是我自己的代码有自定义的springHandlerInterceptor处理返回值,可以忽略。 request.setAttribute(Constants.pageResultData,page); }
完成上述代码,即可实现服务器端自动分页,bootstrap-table根据服务器端返回的total,以及table设定的pageSize,自动生成分页的页面元素,每次点击下一页或者指定页码,bootstrap-table会自动给参数pageNumber赋值,服务器返回指定页的数据。
如果发送的是post请求,因为bootstaptable使用的是ajax方式获取数据,这时会将请求的contenttype默认设置为text/plain,这样在服务端直接通过@RequestParam参数映射是获取不到的。
这时就需要在bootstrap-table的参数列表中显式设置
contentType:"application/x-www-form-urlencoded"
设置成form表单的形式,tomcat内部就会自动将requsetpayload中的数据部分解析放到request.getParameter()中,之后就可以直接通过@RequestParam映射参数获取
post的处理参考了下面这个哥们的博文,在此感谢!
参考链接:
https://www.nhooo.com/article/129039.htm
PS:关于bootstrap布局,这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用:
在线bootstrap可视化布局编辑工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。