spring boot 系列学习记录：http://www.cnblogs.com/jinxiaohang/p/8111057.html

码云源码地址：https://gitee.com/jinxiaohang/springboot

　　本次练习在之前第04章—整合Mybatis基础上进行，也算是Bootstrap-Table基础上进行扩展。

在使用mybatis时，我会将实体类属性和表字段名一致，这样可以不用配映射关系，会自动映射。

在使用JPA时，要以一定方式进行设置实体类属性和表字段名，举个例子：类名UserInfo->表名user_info ，属性userId->字段user_id，属性password->字段password。

一、下载组件

下载bootstrap-table：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

下载bootstrap：https://v3.bootcss.com/

下载jqurey：http://jquery.com/

　　下载源码后解压出来，在demo中导入我们想要的代码。

如下图所示：

　　jquery的一个js文件、

　　bootstrap的一个js文件、一个css文件、一个字体包

　　bootstrap-table的两个js文件、一个css文件

二、bootstrap-table使用

　　在resources下的static中，新建一个html文件添加以下内容：（这里就与第17章写的不太一样了）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>

        开始使用 Bootstrap Table

    </title>

    <link rel="stylesheet" href="css/bootstrap.min.css"><!--需要添加fonts图标显示才会好-->

    <link rel="stylesheet" href="css/bootstrap-table.min.css">

    <script src="js/jquery-3.2.1.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="js/bootstrap-table.min.js"></script>

    <script src="js/bootstrap-table-zh-CN.min.js"></script>

</head>

<body>

<div class="container">

    <div id="toolbar" class="btn-group">

        <button id="btn_add" type="button" class="btn btn-default">

            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增

        </button>

        <button id="btn_edit" type="button" class="btn btn-default">

            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改

        </button>

        <button id="btn_delete" type="button" class="btn btn-default">

            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除

        </button>

    </div>

    <table id="table"></table>

</div>

</body>

<script>

    //先销毁表格

    $('#table').bootstrapTable('destroy');

    $('#table').bootstrapTable({

        url:'/api/user/paging',

        method: 'GET',                      //请求方式（*）

        //contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据

        //dataType:'jsonp',                   //跨域设置

        toolbar: '#toolbar',                //工具按钮用哪个容器

        pagination: true,                   //是否显示分页（*）

        pageNumber:1,//初始化加载第一页，默认第一页

        pageSize: 2,//每页的记录行数（*）

        pageList: [2,3,4],//可供选择的每页的行数（*）

        dataField: "rows",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行

        showColumns: true,                  //是否显示所有的列

        //minimumCountColumns: 2,             //最少允许的列数

        showRefresh: true,                  //是否显示刷新按钮

        queryParamsType:'',

        queryParams: function queryParams(params) {

            var param = {

                offset: (params.pageNumber-1)*params.pageSize,//偏移量

                limit: params.pageSize//长度

            };

            return param;

        },

        sidePagination: "server",

        columns: [{

            checkbox: true,

            align: 'center'//水平居中

        }, {

            field: 'userId',

            title: 'ID',

            align: 'center'//水平居中

        }, {

            field: 'username',

            title: 'Name',

            align: 'center'//水平居中

        }, {

            field: 'password',

            title: 'Age',

            align: 'center'//水平居中

        }

        ]

    });

</script>

三、分页在各层的实现

dao层添加：

    @Select("select * from user limit #{offset},#{limit}")

    List<User> paging(Map<String,Object> param);

service层添加：

    /**

     * 分页获取数据

     * @param param

     * @return

     */

    Map<String,Object> paging(Map<String,Object> param);

serviceimpl层添加：

    @Override

    public Map<String,Object> paging(Map<String, Object> param) {

        //bootstrap-table要求服务器返回的json须包含：totlal，rows

        Map<String,Object> result = new HashMap<String,Object>();

        List<User> rows = userMapper.paging(param);

        int total = userMapper.list().size();

        result.put("total",total);

        result.put("rows",rows);

        return result;

    }

controller层添加：

    @GetMapping("paging")

    public Map<String,Object> paging(@RequestParam int limit,@RequestParam int offset){

        /*所需参数*/

        Map<String, Object> param=new HashMap<String, Object>();

        param.put("limit", limit);

        param.put("offset", offset);

        return userService.paging(param);

    }

四、运行展示

　　访问http://127.0.0.1:8080/api/user/paging?offset=0&limit=5，接口数据格式展示：

　　运行效果展示：

显示条数可根据两项修改。

pageSize: 2,//每页的记录行数（*）

pageList: [2,3,4],//可供选择的每页的行数（*）

五、总结

　　这次才实现真正意义上的分页。

第18章—后端分页（Mybatis）的更多相关文章

  1. 第19章—后端分页（PageHelper）

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  2. Thymeleaf前后端分页查询

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

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

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

  4. python 进行后端分页详细代码

    后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...

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

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

  6. 第18章 集合框架(2)-Set接口

    第18章 集合框架(2)-Set接口 Set是Collection子接口,模拟了数学上的集的概念 Set集合存储特点 1.不允许元素重复 2.不会记录元素的先后添加顺序 Set只包含从Collecti ...

  7. Java 第18章 多态

    18 章  --> 多态 继承: extends 抽象类 abstract (限制类的实例化) 抽象方法 public abstract void show(); //抽象方法只有方法的声明,没 ...

  8. LPTHW 笨方法学python 18章

    看完18章以后,发现第一个练习中,使用了*args读取全部的的输入参数作为一个元组,但是在他的练习中只给了两个变量去赋值,当用户不清楚这个函数的定义时,就可能会给出过多的变量进这个函数,那么就会出现如 ...

  9. 《TCP/IP详解卷1：协议》第17、18章 TCP：传输控制协议（1）-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...

随机推荐

  1. C 语言 mmap

    /* *@author cody *@date 2014-08-12 *@description */ /* #include <sys/mman.h> void *mmap(void * ...

  2. 4.lists(双向链表)

    一.概述 是一个线性链表结构,它的数据由若干个节点构成,每一个节点都包括一个信息块(即实际存储的数据).一个前驱指针和一个后驱指针.它无需分配指定的内存大小且可以任意伸缩,这是因为它存储在非连续的内存 ...

  3. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

  4. jsp tld的function 自定义方法扩展

    引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写法示例: <? ...

  5. 删除Win10的自带应用

    显示 Get-AppxPackage | Select Name, PackageFullName 按关键字删除 Get-AppxPackage *camera* | Remove-AppxPacka ...

  6. The Definitive Guide To Django 2 学习笔记(七） 第四章 模板 （三）使用模板系统

    接下来,我们开始学习如何使用模板系统,但我们并不和前面说的View相结合,我们的这里的目的是展示模板系统是如何独立于Django框架运行的.下面是在pyhon代码中使用Django模板系统的基础例子: ...

  7. libubox-ustream

    参考:libubox [4] - uloop runqueue ustream libubox提供了流缓冲管理,定义在文件ustream.h,ustream.c和ustream-fd.c. 1. 数据 ...

  8. 自己编写Android Studio插件 别停留在用的程度了(转载)

    转自:自己编写Android Studio插件 别停留在用的程度了 1概述 相信大家在使用Android Studio的时候,或多或少的会使用一些插件,适当的配合插件可以帮助我们提升一定的开发效率,更 ...

  9. IntelliJ IDEA 注册码-使用帮助

    拷贝自http://idea.lanyus.com,但是内容有些老旧,有空了我更新一下. 激活 激活码激活 授权服务器激活 破解补丁激活 修改试用时间 激活码 激活码目前为博主分享的自用激活码,到期前 ...

  10. 关键字final 分别修饰一个类，一个方法，一个变量，各起什么作用

    关键字final 分别修饰一个类,一个方法,一个变量,各起什么作用 解答:final修饰类是不能被继承 fianl修饰方法不能在子类中被覆盖 final修饰变量,称为常量,初始化以后不能改变值.