Bootstrap分页插件ajax返回数据，工具类的编写

Posted 2021-02-16 116970u

使用Bootstrap分页插件时，需要返回指定的参数，这样Bootstrap才能够识别

需要引入的css：

<!-- boostrap table -->
<link href="css/bootstrap-table.min.css" rel="stylesheet" />

需要引入的js：

1 <!-- boostrap table -->
2 <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
3 <!--汉化文件，放在 bootstrap-table.js 后面-->
4 <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

jquery也要引入，以及bootstrap其他样式等

接下来进入重点，使用js方法操作table表格

html代码：

1 <table id="table"></table>

只引入这一行即可，其他的我们都在js操作。

js代码：

 1 $(function() {
 2                 $(‘#table‘).bootstrapTable({
 3                     url: ‘pageInfo‘,
 4                     pagination: true, //是否显示分页（*）
 5                     sortable: false, //是否启用排序
 6                     sortOrder: "asc", //排序方式
 7                     //toolbar: ‘#toolbar‘, //工具按钮用哪个容器
 8                     //method:‘post‘,
 9                     //sortable: true,//排序
10                     showColumns: true,//是否显示 内容列下拉框
11                     //clickToSelect: true,//点击选中checkbox
12                     sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
13                     pageNumber: 1, //初始化加载第一页，默认第一页
14                     pageSize: 5, //每页的记录行数（*）
15                     pageList: [5, 10, 50, 100], //可供选择的每页的行数（*）
16                     showRefresh: true,//是否显示刷新按钮
17                     showToggle: true,//是否显示详细视图和列表视图的切换按钮
18                     //search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
19                     //queryParamsType: "", //默认值为 ‘limit‘ ,在默认情况下 传给服务端的参数为：offset,limit,sort
20                     // 设置为 ‘‘  在这种情况下传给服务器的参数为：pageSize,pageNumber
21                     showExport: true,//是否显示导出
22                     columns: [{
23                         field: ‘course.cName‘,
24                         title: ‘课程名称‘
25                     }, {
26                         field: ‘filename‘,
27                         title: ‘文件名称‘
28                     }, {
29                         field: ‘remark‘,
30                         title: ‘说明‘
31                     },{
32                         field: ‘created‘,
33                         title: ‘上传时间‘
34                     },{
35                         field: ‘fileUrl‘,
36                         title: ‘下载地址‘
37                     }, ]
38                 });
39             })

一些常用的方法我已在代码中用=注释说明了。

StuService.java：

1 //bootstrap table分页插件，数据返回
2 BootstrapPage showTask(int offset, int limit,String search);

StuServiceImpl.java：

 1     /**
 2      * @Description //bootstrap table分页插件，数据返回
 3      * @Date 2019-04-04 19:54
 4      * @Param [limit, offset]
 5      * @return com.sun123.springboot.entity.bootstrap.PageHelper
 6      **/
 7     @Override
 8     public BootstrapPage showTask(int offset, int limit,String search) {
 9         BootstrapPage bootstrapPage = new BootstrapPage();
10                     　　　　　　　　　　//pageNumber    pageSize
11         Page pages = PageHelper.startPage(offset, limit);
12 
13         //List<Task> taskList = taskMapper.selectByExample(null);
14         List<Task> taskList = taskMapper.taskList();
15         bootstrapPage.setRows(taskList);
16         bootstrapPage.setTotal((int)pages.getTotal());
17         return bootstrapPage;
18     }

（String search为用户搜索的内容，如果不需要，可以省略）

1     @GetMapping("pageInfo")
2     @ResponseBody
3     public BootstrapPage pageInfo(int offset, int limit, String search){
4         System.out.println("======"+offset+"==="+limit+"====="+search+"=====");
5         BootstrapPage page = stuService.showTask(offset, limit,search);
6         return page;
7     }

工具实体类：

BootstrapPage.java：

 1 import java.util.List;
 2 
 3 /**
 4  * @ClassName PageHelper
 5  * @Description bootstrap分页数据实体类
 6  * @Date 2019/4/4 16:01
 7  * @Version 1.0
 8  */
 9 public class BootstrapPage {
10 
11     //实体类集合
12     private List<?> rows;
13     //数据总条数
14     private int total;
15 
16     /*public PageHelper(List<?> rows, int total) {
17         this.rows = rows;
18         this.total = total;
19     }*/
20 
21     public List<?> getRows() {
22         return rows;
23     }
24 
25     public void setRows(List<?> rows) {
26         this.rows = rows;
27     }
28 
29     public int getTotal() {
30         return total;
31     }
32 
33     public void setTotal(int total) {
34         this.total = total;
35     }
36 }

浏览器传值：

响应数据：

1 {"rows":[{"id":25,"cid":"04021611","uid":3,"filename":"呵呵呵","fileUrl":"http://192.168.83.133/images/2019/03/24/1 - 副本1553391128920311.jpg","created":"2019-03-24T01:32:11.000+0000","updated":"2019-03-24T01:32:11.000+0000","remark":"5263","status":0,"course":{"id":25,"cNum":"04021611","cName":"Hadoop数据分析平台Ⅰ","remark":"5263","status":0}},{"id":27,"cid":"04021611","uid":3,"filename":"65","fileUrl":"http://192.168.83.133/images/2019/03/24/11553420374457538.jpg","created":"2019-03-24T09:39:41.000+0000","updated":"2019-03-24T09:39:41.000+0000","remark":"hfgh","status":0,"course":{"id":27,"cNum":"04021611","cName":"Hadoop数据分析平台Ⅰ","remark":"hfgh","status":0}},{"id":28,"cid":"04021611","uid":3,"filename":"作业一","fileUrl":"http://192.168.83.133/images/2019/03/26/11553580116949268.jpg","created":"2019-03-26T06:02:12.000+0000","updated":"2019-03-26T06:02:12.000+0000","remark":"仅供测试使用","status":0,"course":{"id":28,"cNum":"04021611","cName":"Hadoop数据分析平台Ⅰ","remark":"仅供测试使用","status":0}},{"id":26,"cid":"04021620","uid":3,"filename":"1","fileUrl":"","created":"2019-03-24T09:35:26.000+0000","updated":"2019-03-24T09:35:26.000+0000","remark":"","status":0,"course":{"id":26,"cNum":"04021620","cName":"软件配置管理","remark":"","status":0}},{"id":23,"cid":"as123","uid":3,"filename":"jQuery","fileUrl":"http://192.168.83.133/images/2019/03/24/11553388595299587.jpg","created":"2019-03-24T00:49:58.000+0000","updated":"2019-03-24T00:49:58.000+0000","remark":"42131","status":0,"course":{"id":23,"cNum":null,"cName":null,"remark":"42131","status":0}}],"total":6}

和我们的实体类保持一致，这样才能被解析。