bootstrap table 先後端分頁（超級簡單）

時間 2020-08-18

標籤 bootstrap table 後端分頁超級簡單欄目 Bootstarp 简体版

原文原文鏈接

前端分頁：數據庫查詢全部的數據，在前端進行分頁css

後端分頁：每次只查詢當前頁面加載所須要的那幾條數據html

下載bootstrap前端

下載bootstrap tablejava

jquery誰都有，不說了jquery

項目結構：TestController命名打錯了，請無視。。數據庫

一，前端分頁bootstrap

前端分頁比較簡單，只須要把數據都傳到前端，讓bootstrap table本身處理顯示就好了後端

1.隨便建個userinfo數據庫服務器

2.entity,dao,xml，controlle代碼以下app

public class UserInfo {
    private Integer id;

    private String name;

    private Integer age;

    private String sex;
}


public interface UserDao {
    List<UserInfo> findAll();
}


  <select id="findAll" resultType="com.jz.bootstrap.entity.UserInfo">
     select * from userinfo
     </select>



   @Resource
    private UserDao ud;

    //前端分頁
    @RequestMapping("/index")
    public  String index(){
        return "index";
    }


    @RequestMapping("/findALL")
    @ResponseBody
    public List<UserInfo> findAll(){
        List< UserInfo> list = ud.findAll();
        return list;
    }

3，頁面我用的是thymeleaf模板，模板不一樣的照本身模板語法引入js便可，只須要聲明個table

<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/bootstrap-table-master/dist/bootstrap-table.css}" rel="stylesheet"/>

    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script th:src="@{/bootstrap-table-master/dist/bootstrap-table.js}"></script>
    <script th:src="@{/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<h2>前端分頁</h2>
<table id="mytable"></table>
</body>
<script>
    $(document).ready(function () {
        $("#mytable").bootstrapTable({
            url:"/findALL",  //請求地址
            striped : true, //是否顯示行間隔色
            pageNumber : 1, //初始化加載第一頁
            pagination : true,//是否分頁
            sidePagination : 'client',//server:服務器端分頁|client：前端分頁
            pageSize : 5,//單頁記錄數
            pageList : [ 5, 10],//可選擇單頁記錄數
            showRefresh : true,//刷新按鈕
           columns : [ {
                title : 'id',
                field : 'id',
                sortable : true
            }, {
                title : '姓名',
                field : 'name',
                sortable : true
            }, {
                title : '年齡',
                field : 'age',
                sortable : true
            },{
                title : '性別',
                field : 'sex',
                sortable : true
            }]
        })
    })
</script>
</html>

4.完成效果圖

二，後端分頁

1.封裝一個Page工具類

public class Page {
    private int pageNumber; //每頁的條數
    private int offset; //數據庫查詢索引
  //get，set省略
}

2.複製一下UserInfo類重命名People,並繼承Page

public class People  extends Page {
    private Integer id;

    private String name;

    private Integer age;

    private String sex;
    //...
}

3.封裝一個ReturnData類，做爲返回數據實體類，它有兩個參數，一個表示數據集合，一個是數據總條數

/**
 * 返回數據實體類
 * @param <T>
 */
public class ReturnData <T>{
    //數據集合
    private List<T> rows = new ArrayList<T>();
    //數據總條數
    private int total;
  //...
}

4.dao接口，加兩個方法便可

public interface UserDao {
   // List<UserInfo> findAll();

    List<People> getAll(People people);

    int getTatlo();
}

5.xml 文件，同樣的，加兩個查詢語句便可

 <select id="getAll" resultType="com.jz.bootstrap.entity.People">
     select * from userinfo  LIMIT  #{offset},#{pageNumber}
     </select>

     <select id="getTatlo" resultType="java.lang.Integer">
     select count(1) from userinfo
     </select>

6.controller

 @Resource
    private UserDao ud; 

//後端分頁
    @RequestMapping("/people")
    public  String people(){
        return "people";
    }

    @RequestMapping("/getAll")
    @ResponseBody
    public ReturnData<People> getAll(People people){
        ReturnData<People> peopleData = new ReturnData<People>();
        //獲得總頁數
        int totle = ud.getTatlo();
        peopleData.setTotal(totle);
        //獲得user數據對象
        List<People> plist = ud.getAll(people);
        peopleData.setRows(plist);
        return  peopleData;
    }

7.頁面；和前端分頁同樣的，只是請求地址和分頁方式變了一下，另外向後臺傳了兩個分頁查詢參數

<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/bootstrap-table-master/dist/bootstrap-table.css}" rel="stylesheet"/>

    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script th:src="@{/bootstrap-table-master/dist/bootstrap-table.js}"></script>
    <script th:src="@{/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<h2>後端分頁</h2>
<table id="mytable"></table>
</body>
<script>
    $(document).ready(function () {
        $("#mytable").bootstrapTable({
            url:"/getAll",   //請求地址
            striped : true, //是否顯示行間隔色
            pageNumber : 1, //初始化加載第一頁
            pagination : true,//是否分頁
            sidePagination : 'server',//server:服務器端分頁|client：前端分頁
            pageSize : 5,//單頁記錄數
            pageList : [ 5, 10, 20],//可選擇單頁記錄數
            showRefresh : true,//刷新按鈕
            queryParams : function(params) {//上傳服務器的參數
                var temp = {
                    offset :params.offset + 0,// SQL語句起始索引
                    pageNumber : params.limit  // 每頁顯示數量
                };
                return temp;
            },columns : [ {
                title : 'id',
                field : 'id',
                sortable : true
            }, {
                title : '姓名',
                field : 'name',
                sortable : true
            }, {
                title : '年齡',
                field : 'age',
                sortable : true
            },{
                title : '性別',
                field : 'sex',
                sortable : true
            }]
        })
    })
</script>

</html>