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

时间 2019-11-11

原文原文链接

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

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

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

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

1、下载组件

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

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

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

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

以下图所示：api

　　jquery的一个js文件、springboot

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

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

2、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。

3、运行效果

　　接口数据格式展现：

　　运行效果展现：

每页5条数据

每页10条数据

每页20条数据

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

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

4、总结

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

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