BoostrapTable表格

一、數據加載，前後臺交互

1. 直接html獲取數據

這樣定義了表格結構，也把後臺返回的數據通過EL表達式顯示數據。

                   <table id="table" 
                           data-pagination="true"
                           data-page-list="[5,10,20,50,100,200]"
                           data-toggle="table">
                        <thead>
                            <tr class="alert-info">
                                    <th data-align="center">index</th>
                                    <th data-align="center">name</th>
                                </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${child}" var="li" varStatus="vs">
                                <tr>
                                    <td>${vs.index+1}</td>
                                    <td><a href="childInfo?childID=${li.id}">${li.name}</a></td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>

2. 通過定義對象加載

html中定義表頭或者js中定義columns都可以

        <table id="table">
            <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
            </thead>
        </table>
    </div>
<script>
    var $table = $('#table');

    $(function () {
        var data = [
            {
                "id": 0,
                "name": "Item 0",
                "price": "$0"
            },
            {
                "id": 1,
                "name": "Item 1",
                "price": "$1"
            },
            {
                "id": 2,
                "name": "Item 2",
                "price": "$2"
            }
        ];
        $table.bootstrapTable({data: data});
    });

3. 通過url發送請求獲取

(1) 直接發送請求

 //定義表格模型
 var columnModel =  [{
        field: 'state',
        checkbox:true,
        title: '選擇'
    }, {
        field: 'index',
        formatter:indexFormatter,//可定義這一列的一些樣式
        title: 'index'
    },
        {
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }]；
	
 $table.bootstrapTable({
	 method:'get',
	 url:'loadData', //ajax請求或者外部文件路徑都可以
	 columns:columnModel
 });	

 /**
  * 顯示行號
  */
 function indexFormatter(value,row,index){
     return index+1;
 }

 /**
  * 改爲鏈接，或者增加一些樣式
 */
function indexFormatter(value,row,index){
     return [
       '<a href="javascript:getId('+row.id+');" title="getId">',
       '<i class="glyphicon glyphicon-export" aria-hidden="true"></i>',
       '</a>'
      ].join('');
 } 

（2）更改請求

 $table.bootstrapTable('refresh',{
		 url:'loadDateAgain?param1='+param1+'param2='+param2});

當然也可以更改其他的屬性。

（3）外部文件加載

 <table id="table"
         data-toggle="table"
         data-url="../json/data2.json">
</table>

或者

 $table.bootstrapTable({
	 method:'get',
	 url:'json/data2.json', //ajax請求或者外部文件路徑都可以
	 pagination:true,
	 sidePagination:'client',
	 pageNumber:1,
	 pageSize:10,
	 pageList:[5,10,15,20,50,100,200],
	 columns:columnModel
 });	

二、翻頁

1. 前臺翻頁

一次性獲取了全部的數據，從前臺進行翻頁, 可以在js或者html中定義

 $table.bootstrapTable({
	 method:'get',
	 url:'loadHistory',
	 pagination:true,
	 sidePagination:'client',
	 pageNumber:1,
	 pageSize:10,
	 pageList:[5,10,15,20,50,100,200],
	 columns:columnModel
 });

2. 後臺翻頁

從後臺獲取指定的頁碼的數據

  $table.bootstrapTable({
	 method:'get',
	 url:'loadData',
	 pagination:true,
	 sidePagination:'server',
	 pageNumber:1, //默認的頁碼
	 pageSize:10, //默認每頁數據量
	 pageList:[5,10,15,20,50,100,200], 
	 queryParams: queryParams, //返回傳給後臺的參數
     queryParamsType: "notlimit",//'limit', the params object contains:  limit, offset, search, sort, order;
         //Else, it contains: pageSize, pageNumber, searchText, sortName, sortOrder. Return false to stop request.
         responseHandler: responseHandler,//對返回數據的預處理
	 columns:columnModel 
 });
 
  /**
 * 分頁參數
 */
function queryParams(params) {
	 return {
		 pageSize:params.pageSize,
		 pageNumber:params.pageNumber
	 }
 }
 
/**
 *返回數據格式化
 */
function responseHandler(res){
	return {
		"rows":res.list,
		"total":res.rowsCount
	}
}