第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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。