本文实例讲述了Bootstrap table 服务器端分页功能实现方法。分享给大家供大家参考，具体如下：bootstrap版本 为 3.Xbootstrap版本 为 3.Xbootstrap-table.min.css
bootstrap-table-zh-CN.min.js
bootstrap-table.min.js前端bootstrap+jQuery，服务端使用spring MVC实现restful风格服务前端bootstrap+jQuery，服务端使用spring MVC实现restful风格服务前端代码块前端代码块
function initTable(){
$('#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",//这个接口需要处理bootstrap table传递的固定参数
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：当前行的数据
var a = '测试';
}
}],
pagination:true
});
}
function initTable(){
$('#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",//这个接口需要处理bootstrap table传递的固定参数
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：当前行的数据
var a = '测试';
}
}],
pagination:true
});
}
在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。服务端代码服务端代码
@RequestMapping(value = "/page4list.json")
public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
HttpServletResponse response) {
//搜索框功能
//当查询条件中包含中文时，get请求默认会使用ISO-8859-1编码请求参数，在服务端需要对其解码
if (null != searchText) {
try {
searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
}
//在service通过条件查询获取指定页的数据的list
List list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
//根据查询条件，获取符合查询条件的数据总量
int total = mwMsgQueueService.queryCountBySearchText(searchText);
//自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点
PageResultForBootstrap page = new PageResultForBootstrap();
page.setTotal(total);
page.setRows(list);
//page就是最终返回给客户端的数据结构，可以直接返回给前端
//下边这段，只是我自己的代码有自定义的spring HandlerInterceptor处理返回值，可以忽略。
request.setAttribute(Constants.pageResultData, page);
}
@RequestMapping(value = "/page4list.json")
public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
HttpServletResponse response) {
//搜索框功能
//当查询条件中包含中文时，get请求默认会使用ISO-8859-1编码请求参数，在服务端需要对其解码
if (null != searchText) {
try {
searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
}
//在service通过条件查询获取指定页的数据的list
List list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
//根据查询条件，获取符合查询条件的数据总量
int total = mwMsgQueueService.queryCountBySearchText(searchText);
//自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点
PageResultForBootstrap page = new PageResultForBootstrap();
page.setTotal(total);
page.setRows(list);
//page就是最终返回给客户端的数据结构，可以直接返回给前端
//下边这段，只是我自己的代码有自定义的spring HandlerInterceptor处理返回值，可以忽略。
request.setAttribute(Constants.pageResultData, page);
}
完成上述代码，即可实现服务器端自动分页，bootstrap-table根据服务器端返回的total，以及table设定的pageSize，自动生成分页的页面元素，每次点击下一页或者指定页码，bootstrap-table会自动给参数pageNumber赋值，服务器返回指定页的数据。如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。这时就需要在bootstrap-table的参数列表中显式设置这时就需要在bootstrap-table的参数列表中显式设置
contentType: "application/x-www-form-urlencoded"
contentType: "application/x-www-form-urlencoded"
设置成form表单的形式，tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中，之后就可以直接通过@RequestParam映射参数获取
post的处理参考了下面这个哥们的博文，在此感谢！设置成form表单的形式，tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中，之后就可以直接通过@RequestParam映射参数获取
post的处理参考了下面这个哥们的博文，在此感谢！参考链接:
https:///article/129039.htm参考链接:https:///article/129039.htmPS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：在线bootstrap可视化布局编辑工具：
http://tools./aideddesign/layoutit在线bootstrap可视化布局编辑工具：
在线bootstrap可视化布局编辑工具：
http://tools./aideddesign/layoutit希望本文所述对大家基于bootstrap的程序设计有所帮助。
你有充足的理由选择我们
深圳、上海、杭州、北京前端外包开发:工作10年以上的小伙伴团队，前端开发工作是我们最大的事业。所有您担心的问题，都可以写到合同里。我们会100%努力完成，直到您满意！
