bootstarp table -- 分頁資料顯示
阿新 • • 發佈：2018-12-03
在bootstarp table 中，進行資料分頁的顯示，在使用分頁的時候，bootStarp table 提供了兩種方式，在這裡我們介紹 客戶端(client)進行資料的分頁，希望大神能給我留言，指出這兩種方式的區別。
在上一篇bootstarp table的介紹中，我們已經實現了在前端頁面請求指定的json檔案，然後可以將資料回顯，下面將json檔案中的資料修改成下面的方式
{ "page": 4, // 在bootstarp 中的底層會自動獲取 rows中的資料 "rows": [ { "Level": "lisi", "ParentName": "456", "Name": "李四", "title": 3, "Desc": "0" }, { "Level": "wangwu", "ParentName": "789", "Name": "王五", "title": 4, "Desc": "0" }, { "Level": "zhaoliu", "ParentName": "111", "Name": "趙六", "title": 5, "Desc": "0" }, { "Level": "fanqi", "ParentName": "222", "Name": "範七", "title": 6, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" }, { "Level": "maoba", "ParentName": "333", "Name": "毛八", "title": 7, "Desc": "0" } ], // 資料的總個數 "total": 50 }
在文件中的page 和total 在這裡並沒有使用到，因為使用的是客戶端（client）分頁顯示，所以只會用到rows，因為在bootstarp table的js檔案中，預設獲取的資料就是rows中的資料
進行設定完成之後，資料就會自動的展示出分頁的資料，並且分頁的元件，前提是需要設定
pagination: false, //是否顯示分頁（*）
設定上面的屬性才可以完成資料的分頁展示
核心配置
$(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); // $.get("data.json", function (datas) { // $('#tb_departments').bootstrapTable("load", datas) // }) // oTable.on("load-success.bs.table",function (data) { // console.log("load success"); // $(".pull-right").css("display", "block"); // }) }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: "data.json", method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） pagination: false, //是否顯示分頁（*） sortable: false, //是否啟用排序 // sortOrder: "asc", //排序方式 // 獲取到的是全部的資料 // responseHandler: function (res) { // return res; // }, // 設定分頁按鈕的名稱 paginationPreText: '上一頁', paginationNextText: '下一頁', sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*） 在設定的時候，會在底層進行資料的判斷，進行資料的設定，如果是client就會執行別的資料 pageNumber: 1, //初始化載入第一頁，預設第一頁 // 用於設定每頁顯示的分頁顯示的資料 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: false, //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示重新整理按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點選選中行 height: 500, //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度 uniqueId: "ID", //每一行的唯一標識，一般為主鍵列 showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕 cardView: false, //是否顯示詳細檢視 detailView: false, //是否顯示父子表 columns: [{ checkbox: true, }, { field: 'Name', title: '部門名稱', formatter: nameMatter }, { field: 'ParentName', title: '上級部門' }, { field: 'Level', title: '部門級別' }, { field: 'Desc', title: '描述' }] }); }; return oTableInit; function nameMatter(a1, a2, a3, a4) { console.log("a1:" + a1 + "...a2:" + a2 + "...a3:" + a3 + "...a4:" + a4) console.log(arguments.length) return a1; } };
頁面資料
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>BootStrap Table使用</title>
<[email protected]*1、Jquery元件引用*@-->
<script src="../../../js/jquery-1.11.3.min.js"></script>
<