本文所講的 datatable 講述的是 bootstrap-table 插件。我在項目中就是使用這個插件，很是好用。下面記錄一下，我是怎么用這些插件的。
**我們首先從 html 中使用 bootstrap-table 開始講**
> 本文介紹的 bootstrap-table 版本是 v1.9.0
下載 bootsrap-table 像如下的文件結構：
放置好之后，我們看看，頁面中如何使用，規劃好，在 Tools.php 中新建一個 bootstrapTable 控制器，并在 view\\tools 下面新建一個 bootstraptable.html 頁面。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap-table 功能展示</title>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<!-- Panel Other -->
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>城市列表</h5>
</div>
<div class="ibox-content">
<!--搜索框開始-->
<form id='commentForm' role="form" method="post" class="form-inline">
<div class="content clearfix m-b">
<div class="form-group">
<label>地區名稱：</label>
<input type="text" class="form-control" id="aname" name="aname">
</div>
<div class="form-group">
<button class="btn btn-primary" type="button" id="search"><strong>搜 索</strong>
</button>
</div>
</div>
</form>
<!--搜索框結束-->
<div class="hr-line-dashed"></div>
<div class="example-wrap" style="margin-top:20px">
<div class="example">
<table id="cusTable">
<thead>
<th data-field="id">地區ID</th>
<th data-field="name">地區名稱</th>
<th data-field="operate">操作</th>
</thead>
</table>
</div>
</div>
<!-- End Example Pagination -->
</div>
</div>
</div>
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/static/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script>
function initTable() {
//先銷毀表格
$('#cusTable').bootstrapTable('destroy');
//初始化表格,動態從服務器加載數據
$("#cusTable").bootstrapTable({
method: "get", //使用get請求到服務器獲取數據
url: "{:url('tools/bootstrapTable')}", //獲取數據的地址
striped: true, //表格顯示條紋
pagination: true, //啟動分頁
pageSize: 10, //每頁顯示的記錄數
pageNumber:1, //當前第幾頁
pageList: [5, 10, 15, 20, 25], //記錄數可選列表
sidePagination: "server", //表示服務端請求
//設置為undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder
//設置為limit可以獲取limit, offset, search, sort, order
queryParamsType : "undefined",
queryParams: function queryParams(params) { //設置查詢參數
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
aname:$('#aname').val()
};
return param;
},
onLoadSuccess: function(){ //加載成功時執行
layer.msg("加載成功", {time : 1000});
},
onLoadError: function(){ //加載失敗時執行
layer.msg("加載數據失敗");
}
});
}
$(document).ready(function () {
//調用函數，初始化表格
initTable();
//當點擊查詢按鈕的時候執行
$("#search").bind("click", initTable);
});
</script>
</body>
</html>
~~~
這是一個基礎的展示頁面，我們分別說明一下，具體的用法。
頁面中的 table 展示容器 以及展示的 具體數據由，下面的代碼來控制：
~~~
<table id="cusTable">
<thead>
<th data-field="id">地區ID</th>
<th data-field="name">地區名稱</th>
<th data-field="operate">操作</th>
</thead>
</table>
~~~
你后臺傳來的 是什么字段 此處的**data-field**就應該填寫 和 后臺渲染的 數據完全相同的字段名。
主要的表格渲染函數是 initTable ，其中有很多的配置項，在這里面，我也寫了很多的 注釋，相信你也很容易進行理解。這里你主要關心的是
~~~
url: "{:url('tools/bootstrapTable')}", //獲取數據的地址
~~~
url 填寫你表格需要數據的接口，而且接口的 數據格式必須為：
total 表示的是總數據，rows 中存放查詢需要渲染的數據。
**pageSize**: 10, //每頁顯示的記錄數
這個參數 可以根據自己的實際需要，填寫你要多少條數據分一頁。
~~~
queryParams: function queryParams(params) { //設置查詢參數
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
aname:$('#aname').val()
};
return param;
},
~~~
這部分，配置的時，隨著你的 請求 url 一起傳遞給后臺的參數，后臺可以接收到 這些參數之后，根據傳遞的參數，做出相應的操作。
> 此處的 搜索操作參數、分頁的頁面、每頁展示多少條數據 都是在此處傳遞給后臺。
下面這部分代碼，就是頁面加載完成之后，觸發頁面進行表格渲染的主要地方：
~~~
$(document).ready(function () {
//調用函數，初始化表格
initTable();
//當點擊查詢按鈕的時候執行
$("#search").bind("click", initTable);
});
~~~
好了，前臺部分，大致的將完了，讓我們來看一下，接口該如何寫吧。Tools.php 中的 bootstrapTable 方法：
~~~
// bootstrap-table
public function bootstrapTable()
{
if(request()->isAjax()){
$param = input('param.');
$where = '';
if(!empty($param['aname'])){
$where['name'] = $param['aname'];
}
$limit = $param['pageSize'];
$offset = ($param['pageNumber'] - 1) * $limit;
// 此處自己處理分頁，不采用官方的分頁函數
$selectResult = db('area')->where($where)->limit($offset, $limit)->select();
foreach($selectResult as $key=>$vo){
$selectResult[$key]['operate'] = '<button class="btn btn-info" type="button">編輯</button>';
}
$return['total'] = db('area')->where($where)->count(); //總數據
$return['rows'] = $selectResult;
return json($return);
}
return $this->fetch();
}
~~~
好了，讓我們訪問[http://www.phper.com/index/tools/bootstraptable](http://www.phper.com/index/tools/bootstraptable)看看效果吧：
是不是很棒，一個異步渲染的表格就這么的出現了。分頁功能也都完好。不過，你會發現，此時的分頁部分，沒有上一頁 下一頁 以及首頁 尾頁等漢字標識，雖然通過 > 和 >> 進行了標識，但是依舊不夠直觀。那么怎么才能讓它漢化呢？其實也非常的簡單，只要在 initTable 中加入如下的配置：
~~~
paginationFirstText: "首頁",
paginationPreText: "上一頁",
paginationNextText: "下一頁",
paginationLastText: "尾頁",
~~~
