第17章—前端分页（Bootstrap-Table）

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

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

　　本篇重点介绍bootstrap-table，一款很棒的前端框架，需要bootstrap支持，可以用于数据的展示，后端没有实现数据分页，只是前端将所接收的数据进行分页。

　　本次练习在之前整合Spring Data JPA基础上进行。

一、下载组件

下载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文件添加以下内容：

<!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({

        url: '/api/user/list',//获取所有数据的接口
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        pagination: true,                   //是否显示分页（*）
        striped: true,                      //是否显示行间隔色
        //sortOrder: "asc",                   //排序方式
        uniqueId: "userId",                 //每一行的唯一标识，一般为主键列
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [5,10,20],//可供选择的每页的行数（*）
        showRefresh: true,                  //是否显示刷新按钮
        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
        columns: [{
            field: 'userId',//与返回数据对象属性一致
            title: 'Item userId'//表头显示
        }, {
            field: 'userName',
            title: 'Item userName'
        }, {
            field: 'password',
            title: 'Item password'
        }, ]
    });

</script>

　　如果实体不同，只需修改url、和columns。

三、运行效果

　　接口数据格式展示：

　　运行效果展示：

每页5条数据

每页10条数据

每页20条数据

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

pageSize: 10,           //每页的记录行数（*）
pageList: [5,10,20],　　//可供选择的每页的行数（*）

四、总结

　　没有实现真正意义上的分页，不能缓解后端查询和数据传输的压力，只是bootstrap-table将数据很好展现出来。

　　bootstrap-table还有更多使用方式参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/