bootstrap-table分页查询

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

通过bootstrap-table的插件来进行页面的分页查询操作

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入所需要的js包

  <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

在html页面文件中引入这些js包，因为是从网络上直接加载使用，所以如果没有联网的话是加载不了的，且integrity属性设置引入js文件的hash值，浏览器在下载js文件时候，会对js文件进行hash计算，如果一致则正常加载，否则拒绝加载运行。

二、执行代码

代码如下（示例）：

 <table id="list"></table>
		 <script>
			 $(function (){
				 $("#list").bootstrapTable({
					 url:"list.service",//执行的路径
					 striped:true, //是否显示行的间隔
					 pageNumber: 1,//起始的页面
					 pagination:true,//是否分页
					 sidePagination:'server',//服务器分页
					 pageSize:10,//每页显示的数据量
					 pageList:[10,20,40],//每页可显示的条数
					 showRefresh:true,//在页面显示刷新按钮
				     queryParams:function (params) {
				     //向服务器传入参数
						 var temp = {
							offset:params.offset,
							pageNumber:params.limit
						 };
						 return temp;
					 },
					 columns:[//表中的名称和参数
						 {
							 title:"编号",//表中列名
							 field:"id",//传出的参数
							 sortStable:false//是否排序
						 },
						 {
							 title:"学号",
							 field:"number",
							 sortStable:false
						 },
						 {
							 title:"姓名",
							 field:"userName",
							 sortStable:false
						 },
						 {
							 title:"电话",
							 field:"userPhone",
							 sortStable:false
						 },
						 {
							 title:"地址",
							 field:"address",
							 sortStable:false
						 },
						 {
							 title:"入学时间",
							 field:"inTime",
							 sortStable:false
						 },
						 {
							 title:"毕业时间",
							 field:"outTime",
							 sortStable:false
						 },
						 {
							 title:"状态",
							 field:"status",
							 sortStable:false
						 },
						 {
							 title:"班主任电话",
							 field:"teacharPhone",
							 sortStable:false
						 }
					 ]
				 });
			 });
		 </script>

2.服务器传入学生信息到页面

###1.创建符合bootstrap-table的类

这里使用String类型是为了更好的在页面字符数据而不是0 1 或者 不通俗的时间类型。因为在页面我们是不能进行代码的赋值操作所以需要在传到页面前就进行数据的处理

代码如下（示例）：

 public class BootstrapTableStudent {
    private Integer id;
    private String number;
    private String userName;
    private String userPhone;
    private String address;
    private String inTime;
    private String outTime;
    private String status;
    private String teacherPhone;

    private String inTime;
    private String outTime;
    private String status;

在服务端获取页面传来的offset和pageNumber参数，获取数据的总数，将数据封装，最后转换为json类型传到页面
代码如下（示例）：
将BootstrapTableStudent类型的数据封装在符合Bootstrapbootstrap-table的格式的ResultData类里面返回给页面

 public class ResultData<T> {
    //每次查询的数据集合
    private List<T> rows = new ArrayList<>();
    //总数量
    private int total;

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

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

    public int getTotal() {
        return total;
    }

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

 //1.获得查询数据的起始索引值
        int pageindex = Integer.parseInt(req.getParameter("offset"));
        //2.获得当前要查询的数据量
        int pagesize = Integer.parseInt(req.getParameter("pageNumber"));
        //3.进行查询
        List<BootstrapTableExpress> list = service.findAll(true, pageindex, pagesize);
        List<Map<String, Integer>> console = service.console();
        int total = console.get(0).get("data1_size");
        //4.将集合封装成bootstrap-table格式
        ResultData<BootstrapTableExpress> data = new ResultData<>();
        data.setRows(list);
        data.setTotal(total);
        Gson g = new Gson();
        String json = g.toJson(data);
        return json;

最后就可以在页面显示分页
注意：该方法页面的offset 是通过累加的方式来limit 比如:(当pagesize=5时，offset的每页值为0，5，10，15…等)；