paginatorhelper ajax,bootstrap-table + bootstrap-paginator + PageHelper +springmvc 进行分页

1.引入js

2.页面

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=‘预订‘;

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 busInfoList(

@RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) {

PageHelper.startPage(pageNum, pageSize);

List list = busServiceImpl.busList(); //查询所有的数据 select* from bus，PageHelper工具类自动分页

PageInfo info = new PageInfo<>(list);

return info;

}

5.效果

需要注意：

1.使用$(‘#busDataTable‘).bootstrapTable({})初始化表格时，不需要再进行url检索，只用设置表格样式。

2.使用ajax进行数据检索，把得到的数据加载到表格中。$(‘#busDataTable‘).bootstrapTable(‘load‘,data.list);

原文：https://www.cnblogs.com/studyxu/p/13558770.html