bootstrapTable分頁（一）
阿新 • • 發佈：2018-11-19
bootstrapTable分頁
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap-table-demo-分頁</title> <!-- 引入bootstrap樣式 --> <link rel="stylesheet" href="css/bootstrap.min.css" /> <!-- 引入bootstrap-table樣式 --> <link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /> </head> <body style="width: 90%;margin: 0 auto;"> <h3>bootstrap-table分頁</h3> <div id="toolbar"> <button class="btn btn-primary" id="btnRefresh">Refresh</button> </div> <!--bootstrap-table表格--> <table id="data-table" ></table> <!-- jquery --> <script type="text/javascript" src="js/jquery.min.js" ></script> <!-- bootstrap --> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <!-- bootstrap-table --> <script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script> <!-- 引入中文語言包 --> <script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script> <script type="text/javascript"> var $table = $('#data-table'); //查詢引數 var queryParams = {id: 1}; /** * 初始化Table */ //先銷燬表格 $table.bootstrapTable('destroy'); //初始化表格 $table.bootstrapTable({ //表格引數 //請求地址,此處資料為本地載入 url: 'data1.json', //請求方式 method: "get", //請求內容型別 contentType: "application/x-www-form-urlencoded", //資料型別 dataType: "json", //table高度：如果沒有設定，表格自動根據記錄條數覺得表格高度 height: '582', //是否顯示行間隔色 striped: true, //是否啟用排序 sortable: true, //排序方式 sortOrder: "asc", //是否使用快取 cache: false, //每行的唯一標識 uniqueId: "id", //指定工具欄 toolbar: "#toolbar", //顯示重新整理按鈕 showRefresh: false, //切換顯示樣式 showToggle: false, //預設顯示詳細檢視 cardView: false, //是否顯示搜尋 search: true, //是否顯示分頁 pagination: true, //是否啟用點選選中行 clickToSelect: true, //最少要顯示的列數 minimumCountColumns: 2, //顯示隱藏列 showColumns: false, //cell沒有值時顯示 undefinedText: '-', //分頁方式：client客戶端分頁，server服務端分頁 /* 指定。注意，這兩種後臺傳過來的json資料格式也不一樣 client : 正常的json array格式 [{},{},{}] server： {“total”:0,”rows”:[]} 其中total表示查詢的所有資料條數，後面的rows是指當前頁面展示的資料量。*/ sidePagination: "client", //每頁的記錄行數 pageSize: 3, //初始化載入第1頁，預設第1頁 pageNumber: 1, //可供選擇的每頁的行數 pageList: "[10, 20, 50, 80, 100]", paginationFirstText: "首頁", paginationPreText: "上一頁", paginationNextText: "下一頁", paginationLastText: "末頁", //按鈕樣式 buttonsClass: 'btn', //分頁器class iconSize: 'pager', //查詢條件 queryParams: queryParams, //列引數 //表頭 columns: [ { title: '選擇', checkbox: true, align: 'center' // 居中顯示 }, { field: 'id', title: 'Item ID', align: 'center' // 居中顯示 }, { field: 'name', title: 'Item Name', align: 'center' // 居中顯示 }, { field: 'price', title: 'Item Price', align: 'center' // 居中顯示 } ], onLoadSuccess: function (res) {//可不寫 //載入成功時 console.log(res); }, onLoadError: function (statusCode) { return "載入失敗了" }, formatLoadingMessage: function () { //正在載入 return "拼命載入中..."; }, formatNoMatches: function () { //沒有匹配的結果 return '無符合條件的記錄'; } }); // 獲取表格所有已經勾選的行資料，為一個物件陣列 var selects = $table.bootstrapTable('getSelections'); //重新整理 $("#btnRefresh").on('click', function(){ $table.bootstrapTable('refresh'); }); </script> </body> </html>
data1.json
[ { "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" }, { "id": 3, "name": "Item 3", "price": "$3" }, { "id": 4, "name": "Item 1", "price": "$1" }, { "id": 5, "name": "Item 1", "price": "$1" }, { "id": 6, "name": "Item 1", "price": "$1" }, { "id": 7, "name": "Item 1", "price": "$1" } ]
bootstrapTable分頁（二） https://blog.csdn.net/csdnluolei/article/details/83510577