bootstrap 分頁表格插件

找了兩個table的插件，一個是bootstrap table ，另一個是bootstrap-paginator

這里只介紹 bootstrap table 插件 使用及簡單案例

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

使用方法詳解：

其他案例解析：http://www.jb51.net/article/79033.htm

簡單的html案例（使用data-*來獲取數據）：http://www.jq22.com/yanshi467

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數據填充

bootStrap table獲取數據有兩種方式，一是通過table 的data-url屬性指定數據源，二是通過JavaScript初始化表格時指定url來獲取數據*

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

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

 

3. js獲取數據的案例及釋義

<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">狀態</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">編號</th>
                        <th data-field="time">申請時間</th>
                        <th data-field="status" data-formatter="formatStatus">提現狀態</th>
                        <th data-field="remark">備注</th>
                    </tr>
                    </thead>
                </table>
            </div>
</div>

 

//注意
//1. contentType: "application/x-www-form-urlencoded" 想要后台使用struts來接受數據，或者使用對象.屬性的方法獲取，需要配置這個form，默認是“json”
//2. pageNo 第幾頁，需要使用“Math.ceil(params.offset/params.limit) + 1”來計算，params.pageNumber一直獲取的是第一頁

loadData();//默認查詢

function loadData(){

//表格id
$('#query_results').bootstrapTable({
        url: '/test',  //請求后台的URL（*） method: 'post', //請求方式（*） contentType: "application/x-www-form-urlencoded",//需要設置為這個參數，后台才能通過對象獲取值,這里要注意 dataType: "json",//期待返回數據類型 toolbar: '#toolbar', //工具按鈕用哪個容器 toolbarAlign: "left",//工具欄對齊方式 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） //sortable: false, //是否啟用排序 sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 5, //每頁的記錄行數（*） pageList: [5, 10, 25, 50, 100], //可供選擇的每頁的行數（*） sortOrder: "asc", //排序方式 search: false,//搜索功能 buttonsAlign: "left",//按鈕對齊方式 //showColumns: true,//列選擇按鈕 strictSearch: true, clickToSelect: true, //是否啟用點擊選中行 //height: 460, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 uniqueId: "id", //每一行的唯一標識，一般為主鍵列 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 queryParamsType: 'limit', queryParams: queryParams }); //默認加載時攜帶參數 function queryParams(params) { var params = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 pageNo : Math.ceil(params.offset/params.limit) + 1, //頁碼 pageSize : params.limit, //頁面大小 "status" : $("#status").val() }; return params; }

}

//點擊“查詢”按鈕
$("#query").bind("click",function(){
　　//兩種方式：
　　//1.直接刷新 $('#query_results').bootstrapTable("refresh", {}); 
　　//2. 先銷毀數據，再次查詢，如下
 $("#query_results").bootstrapTable('destroy');
 loadPageData();
});

//表格列的格式化翻譯，對應data-formatter="formatStatus"
function formatStatus(value, row, index){
　　if(value == 'S1'){
　　　　return "待處理";
　　}else{
　　　　return "已處理"
　　}
}