本文所讲的 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: "尾页",
~~~
