bootstrap-table + bootstrap-paginator + PageHelper +springmvc 进行分页
1.引入js
<script type="text/javascript" src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/bootstrap-table.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap-paginator.min.js"></script>
2.页面
<table id="busDataTable" style="table-layout:fixed;" data-toggle="table" >
</table>
<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>
3.添加js
1 $(function(){
2 //初始化表格
3 $('#busDataTable').bootstrapTable({
4 height: 550,
5 columns: [
6 [{
7 title: '车次',
8 field: 'busNum',
9 align: 'center',
10 valign: 'middle'
11 }, {
12 title: '出发地',
13 field: 'departure',
14 align: 'center',
15 valign: 'middle'
16 },{
17 title: '目的地',
18 field: 'destination',
19 align: 'center',
20 valign: 'middle'
21 }, {
22 title: '出发日期',
23 field: 'departureDate',
24 align: 'center',
25 valign: 'middle'
26 }, {
27 title: '出发时间',
28 field: 'departureTime',
29 align: 'center',
30 valign: 'middle',
31 formatter: timeFormatter
32 }, {
33 title: '到达时间',
34 field: 'arrivalTime',
35 align: 'center',
36 valign: 'middle',
37 formatter: timeFormatter
38 }, {
39 title: '价钱',
40 field: 'price',
41 align: 'center',
42 valign: 'middle',
43 formatter: priceFormatter
44 },{
45 title: '座位',
46 field: 'seat',
47 align: 'center',
48 valign: 'middle',
49 formatter: seatFormatter
50 },{
51 title: '里程',
52 field: 'mileage',
53 align: 'center',
54 valign: 'middle',
55 formatter: mileageFormatter
56 },
57
58 {
59 field: 'operate',
60 title: '操作',
61 align: 'center',
62 formatter: operateFormatter
63 }]
64 ]
65 })
66 function timeFormatter(value, row, index) {
67 var obj =value.split(":");
68 return obj[0]+":"+obj[1];
69 }
70 function priceFormatter(value, row, index) {
71 return "¥"+value;
72 }
73 function seatFormatter(value, row, index) {
74 return value+"个";
75 }
76 function mileageFormatter(value, row, index) {
77 return value+"km";
78 }
79
80 function operateFormatter(value, row, index) {
81 var op='<button class=" btn btn-success btn-lg" onClick="del(\''+row.id+'\')">预订</button>';
82 return op;
83 }
84
85 //初始化页面
86 getPageOfMemo(1);
87
88 // 分页函数
89 function getPageOfMemo(page) {
90 var element = $('#pageLimit');
91 element.html(""); //清空分页
92 var pageSize = 5; //每页的数量
93 //搜索值 pageNum:当前页 pageSize：每页的数量
94 var aQuery = {'pageNum':page,'pageSize':pageSize};
95 96 $.ajax({
97 url: "buslist",
98 type:'post',
99 data: aQuery,
100 success: function(data){
101 if (data.list != null) {
102 //写入页面数据
103 $('#busDataTable').bootstrapTable('load',data.list);
104
105 var options = { //分页
106 bootstrapMajorVersion : 3, //版本
107 currentPage : data.pageNum, // 当前页数
108 numberOfPages : 10, // 显示按钮的数量
109 totalPages : data.pages, // 总页数
110 itemTexts : function(type, page, current) {
111 switch (type) {
112 case "first": return "首页";
113 case "prev": return "上一页";
114 case "next": return "下一页";
115 case "last": return "末页";
116 case "page": return page;
117 }
118 },
119 // 点击事件，用于通过Ajax来刷新整个list列表
120 onPageClicked : function(event, originalEvent, type, page) {
121 getPageOfMemo(page);
122 }
123 };
124 element.bootstrapPaginator(options);
125 }
126 },
127 error: function(){
128 alert("请求出错！");
129 }
130 });
131 };
132 })
4.controller
//需要导入jsqlparser-1.0.jar 和pagehelper-5.1.2.jar
@RequestMapping("buslist")
@ResponseBody
public PageInfo<Bus> busInfoList(
@RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<Bus> list = busServiceImpl.busList(); //查询所有的数据 select* from bus，PageHelper工具类自动分页
PageInfo<Bus> info = new PageInfo<>(list);
return info;
}
5.效果
需要注意：
1.使用$('#busDataTable').bootstrapTable({})初始化表格时，不需要再进行url检索，只用设置表格样式。
2.使用ajax进行数据检索，把得到的数据加载到表格中。$('#busDataTable').bootstrapTable('load',data.list);
