Bootstrap分頁(yè)表格插件使用教程

本篇文章介紹了Bootstrap分頁(yè)表格插件的使用方法，bootStrap table獲取數(shù)據(jù)有兩種方式，一是通過table 的data-url屬性指定數(shù)據(jù)源，二是通過JavaScript初始化表格時(shí)指定url來(lái)獲取數(shù)據(jù)。

Bootstrap分頁(yè)表格插件使用教程

找了兩個(gè)table的插件，一個(gè)是bootstrap table ，另一個(gè)是bootstrap-paginator

這里只介紹 bootstrap table 插件 使用及簡(jiǎn)單案例

文檔介紹：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

推薦教程：Bootstrap圖文教程

1. 引入js、css文件

<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <link href="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css"> <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>

2.table數(shù)據(jù)填充

bootStrap table獲取數(shù)據(jù)有兩種方式，一是通過table 的data-url屬性指定數(shù)據(jù)源，二是通過JavaScript初始化表格時(shí)指定url來(lái)獲取數(shù)據(jù)*

注意：使用data-toggle="table"的話，js操作就會(huì)失效，反之生效

<table data-toggle="table">  <thead>  ...  </thead> </table>      $('#table').bootstrapTable({   url: 'data.json'  });

3. js獲取數(shù)據(jù)的案例及釋義

<div class="panel panel-default">             <div class="panel-body table-responsive"> 　　　　　　　　　     <div class="query-div" id="toolbar">         <form class="form-inline" role="form" id="query_form">             <div class="form-group query-form-group">                 <label for="status">狀態(tài)</label>                 <select class="form-control" id="with_appr_status"                     <option value="">全部</option>                     <option value="S1">待處理</option>                     <option value="S2">已處理</option>                 </select>             </div>             <div class="form-group query-form-group">                 <button type="button" class="btn btn-default" id="with_query">查詢</button>             </div>         </form>     </div>                 <table id="query_results" class="table table-hover">                     <thead>                     <tr>                         <th data-field="code">編號(hào)</th>                         <th data-field="time">申請(qǐng)時(shí)間</th>                         <th data-field="status" data-formatter="formatStatus">提現(xiàn)狀態(tài)</th>                         <th data-field="remark">備注</th>                     </tr>                     </thead>                 </table>             </div> </div>

//注意 //1. contentType: "application/x-www-form-urlencoded"  想要后臺(tái)使用struts來(lái)接受數(shù)據(jù)，或者使用對(duì)象.屬性的方法獲取，需要配置這個(gè)form，默認(rèn)是“json” //2. pageNo 第幾頁(yè)，需要使用“Math.ceil(params.offset/params.limit) + 1”來(lái)計(jì)算，params.pageNumber一直獲取的是第一頁(yè) loadData();//默認(rèn)查詢 function loadData(){ //表格id $('#query_results').bootstrapTable({         url: '/test',  //請(qǐng)求后臺(tái)的URL（*）         method: 'post',   //請(qǐng)求方式（*）         contentType: "application/x-www-form-urlencoded",//需要設(shè)置為這個(gè)參數(shù)，后臺(tái)才能通過對(duì)象獲取值,這里要注意         dataType: "json",//期待返回?cái)?shù)據(jù)類型         toolbar: '#toolbar',  //工具按鈕用哪個(gè)容器         toolbarAlign: "left",//工具欄對(duì)齊方式         striped: true,   //是否顯示行間隔色         cache: false,   //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）         pagination: true,   //是否顯示分頁(yè)（*）         //sortable: false,   //是否啟用排序         sidePagination: "server",  //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）         pageNumber: 1,   //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)         pageSize: 5,   //每頁(yè)的記錄行數(shù)（*）         pageList: [5, 10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*）         sortOrder: "asc",   //排序方式         search: false,//搜索功能         buttonsAlign: "left",//按鈕對(duì)齊方式         //showColumns: true,//列選擇按鈕         strictSearch: true,         clickToSelect: true,  //是否啟用點(diǎn)擊選中行         //height: 460,   //行高，如果沒有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺得表格高度         uniqueId: "id",   //每一行的唯一標(biāo)識(shí)，一般為主鍵列         cardView: false,   //是否顯示詳細(xì)視圖         detailView: false,   //是否顯示父子表         queryParamsType: 'limit',         queryParams: queryParams     });     //默認(rèn)加載時(shí)攜帶參數(shù)     function queryParams(params) {         var params = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的             pageNo : Math.ceil(params.offset/params.limit) + 1, //頁(yè)碼             pageSize : params.limit, //頁(yè)面大小             "status" : $("#status").val()         };         return params;     } } //點(diǎn)擊“查詢”按鈕 $("#query").bind("click",function(){ 　　//兩種方式： 　　//1.直接刷新 $('#query_results').bootstrapTable("refresh", {});   　　//2. 先銷毀數(shù)據(jù)，再次查詢，如下     $("#query_results").bootstrapTable('destroy');     loadPageData(); });   //表格列的格式化翻譯，對(duì)應(yīng)data-formatter="formatStatus" function formatStatus(value, row, index){ 　　if(value == 'S1'){ 　　　　return "待處理"; 　　}else{ 　　　　return "已處理" 　　} }