bootstrap table 前后端分页

发布时间：2020-12-17 20:42:43 所属栏目：安全来源：网络整理

导读：前端分页：数据库查询所有的数据，在前端进行分页后端分页：每次只查询当前页面加载所需要的那几条数据下载bootstrap 下载bootstrap table jquery谁都有，不说了项目结构：TestController命名打错了，请无视。。一，前端分页前端分页比较简单，只需要把

前端分页：数据库查询所有的数据，在前端进行分页

后端分页：每次只查询当前页面加载所需要的那几条数据

下载bootstrap

下载bootstrap table

jquery谁都有，不说了

项目结构：TestController命名打错了，请无视。。

一，前端分页

前端分页比较简单，只需要把数据都传到前端，让bootstrap table自己处理显示就行了

1.随便建个userinfo数据库

2.entity,dao,xml，controlle代码如下

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‘,{
                title : ‘年龄‘,field : ‘age‘,{
                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",//是否显示行间隔色
            pageNumber : 1,//是否分页
            sidePagination : ‘server‘,//server:服务器端分页|client：前端分页
            pageSize : 5,//单页记录数
            pageList : [ 5,10,20],//刷新按钮
            queryParams : function(params) {//上传服务器的参数
                var temp = {
                    offset :params.offset + 0,// SQL语句起始索引
                    pageNumber : params.limit  // 每页显示数量
                };
                return temp;
            },columns : [ {
                title : ‘id‘,field : ‘id‘,{
                title : ‘姓名‘,field : ‘name‘,{
                title : ‘年龄‘,field : ‘age‘,{
                title : ‘性别‘,field : ‘sex‘,sortable : true
            }]
        })
    })
</script>

</html>

8.效果图

完事收工。。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!