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>
< [email protected]*2、bootstrap元件引用*@-->
<script src="../../js/bootstrap.min.js"></script>
<link href="../../css/bootstrap.min.css" rel="stylesheet"/>
<[email protected]*3、bootstrap table元件以及中文包的引用*@-->
<script src="../../js/bootstrap-table.js"></script>
<link href="../../css/bootstrap-table.css" rel="stylesheet"/>
<script src="../../js/bootstrap-table-zh-CN.js"></script>
<[email protected]*4、頁面Js檔案的引用*@-->
<script src="index.js"></script>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">部門名稱</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">狀態</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢
</button>
</div>
</div>
</form>
</div>
</div>
<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>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-12">
<div>
<table id="tb_departments"></table>
</div>
</div>
</div>
</div>
<table id="table"></table>
</body>