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
	}
}