使用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}
和我们的实体类保持一致，这样才能被解析。