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

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

需要引入的css：

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

需要引入的js：

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

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

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

html代码：

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

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

js代码：

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

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

StuService.java：

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

StuServiceImpl.java：

     /**
      * @Description //bootstrap table分页插件，数据返回
      * @Date 2019-04-04 19:54
      * @Param [limit, offset]
      * @return com.sun123.springboot.entity.bootstrap.PageHelper
      **/
     @Override
     public BootstrapPage showTask(int offset, int limit,String search) {
         BootstrapPage bootstrapPage = new BootstrapPage();
                     　　　　　　　　　　//pageNumber    pageSize
         Page pages = PageHelper.startPage(offset, limit);

         //List<Task> taskList = taskMapper.selectByExample(null);
         List<Task> taskList = taskMapper.taskList();
         bootstrapPage.setRows(taskList);
         bootstrapPage.setTotal((int)pages.getTotal());
         return bootstrapPage;
     }

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

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

工具实体类：

BootstrapPage.java：

 import java.util.List;

 /**
  * @ClassName PageHelper
  * @Description bootstrap分页数据实体类
  * @Date 2019/4/4 16:01
  * @Version 1.0
  */
 public class BootstrapPage {

     //实体类集合
     private List<?> rows;
     //数据总条数
     private int total;

     /*public PageHelper(List<?> rows, int total) {
         this.rows = rows;
         this.total = total;
     }*/

     public List<?> getRows() {
         return rows;
     }

     public void setRows(List<?> rows) {
         this.rows = rows;
     }

     public int getTotal() {
         return total;
     }

     public void setTotal(int total) {
         this.total = total;
     }
 }

浏览器传值：

响应数据：

 {"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}

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