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}

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