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

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

下载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 : , //初始化加载第一页

            pagination : true,//是否分页

            sidePagination : 'client',//server:服务器端分页|client：前端分页

            pageSize : ,//单页记录数

            pageList : [ , ],//可选择单页记录数

            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>

8.效果图

完事收工。。

bootstrap table 前后端分页（超级简单）的更多相关文章

  1. 前后端分离，简单JWT登录详解

    前后端分离,简单JWT登录详解 目录 前后端分离,简单JWT登录详解 JWT登录流程 1. 用户认证处理 2. 前端登录 3. 前端请求处理 4. 后端请求处理 5. 前端页面跳转处理 6. 退出登录 ...

  2. Bootstrap-table学习笔记（二）——前后端分页模糊查询

    在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1,前端分页 2,后端分页 3,模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. ...

  3. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  4. Thymeleaf前后端分页查询

    分页查询是一个很常见的功能,对于分页也有很多封装好的轮子供我们使用. 比如使用mybatis做后端分页可以用Pagehelper这个插件,如果使用SpringDataJPA更方便,直接就内置的分页查询 ...

  5. 关于bootstrap table的server分页

    首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ u ...

  6. SQL前后端分页

    /class Page<T> package com.neusoft.bean; import java.util.List; public class Page<T> { p ...

  7. [转]Bootstrap table后端分页（ssm版）

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

  8. Bootstrap table后端分页（ssm版）

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...

  9. Bootstrap table前端分页（ssm版）

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

随机推荐

  1. linux自定义开机自启多个服务的脚本

    linux服务器重启后,每次要启动redis.ftp.tomcat等应用总是很麻烦,于是写了一个自定义脚本,在开机或重启的时候,自动启动多个服务.应用. 很简单,写脚本.设置开机启动.   第一步.准 ...

  2. Spring Boot 对请求的映射

    在SpringBoot中对请求资源的映射有三种方式: 1.通过编写一个Controller请求,获得客户端发送过来的请求就转发出去 //通过这种方式可以来映射页面请求路径 @PostMapping(& ...

  3. Ajax原理以及优缺点

    ajax原理和XmlHttpRequest对象 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...

  4. Java集合List、Set、Map

    集合是 java 基础中非常重要的一部分,同样也是 Java 面试中很重要的一个知识点.所以,给王小整理了这篇关于集合的文章. 1.接口继承关系以及实现 集合类存放于 Java.util 包中,主要有 ...

  5. Freemaker Replace函数的正则表达式运用

    replace(param1,param2,param3) param1 正则表达式:param2 将匹配的字符替换成指定字符:param3 模式 param3 参数如下  模式  i   r   m ...

  6. jackson 流式API

    http://www.cnblogs.com/lee0oo0/articles/2652528.html Jackson提供了三种可选的JSON处理方法 1.流式API     com.fasterx ...

  7. Error:java: Annotation processing is not supported for module cycles. Please ensure that all modules from cycle [web_dao,web_service] are excluded from annotation processing

    早上学习maven环境搭建时遇到的这个问题 下面这个错误的大概意思是:模块之间的互相依赖 Error:java: Annotation processing is not supported for ...

  8. vuepress 学习心得

    vuepress是一个静态网站生成器,在我看来就是写博客和教程的好工具.教程请见官网:https://www.vuepress.cn 安装方法建议局部安装:node8.0以上,新建vue项目,可能会出 ...

  9. 安装完Ubuntu后要做的事情

    Ubuntu 16.04安装完成后,还需要做一些配置才能愉快的使用,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的off ...

  10. js左右大小变化

    点左边左边变大.点右边右边大左边小 <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ w ...