前沿:做后台管理显示数据，采用js表格有很多好处，例如排序和搜索，分页显示，超出列可以隐藏，或者左右滚动显示。这些功能已经是一个表格的标准样式，今天分享的bootstrap table插件即可实现
上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ，遇到不少使用方面的问题，也做了一部分笔记，在此分享出来供需要使用的园友参考。还记得前两天有园友加群问我Bootstrap Table的使用问题，呵呵，巧了，今天博主也遇到同样的问题了，在此还是要表示抱歉，没有将这篇提前发出来。
bootstrap table系列：
一、相关文档和技术网站小结
关于流式布局的bootstrap，博主也是最近半年才开始使用，用过之后才知道其实开源的东西挺不错的，还是为bootstrap开源工作者点一个大大的赞！老规矩，贴出相关文档：
Bootstrap中文网：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/
Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/
Bootstrap离线API
Bootstrap Table 离线API
这里要说明一点：Bootstrap Table的离线API是博主自己在官网上面保存下来的，样式可能存在问题。博主也不想使用这种看起来乖乖的离线文档，但没办法，http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/这网站经常性的打不开，貌似有被墙的可能性。下一步是不是要翻墙了，O(∩_∩)O~。
二、Bootstrap Table的引入
关于Bootstrap Table的引入，一般来说还是两种方法：
1、直接下载源码，添加到项目里面来。
由于Bootstrap Table是Bootstrap的一个组件，所以它是依赖Bootstrap的，我们首先需要添加Bootstrap的引用。Bootstrap的包直接在 http://v3.bootcss.com/ 里面可以找到，版本已经出来4的预览版，但还是建议使用比较稳定的Bootstrap3，目前最新的3.3.5。然后就是Bootstrap Table的包了，由于它是开源的，我们直接进到它的源码https://github.com/wenzhixin/bootstrap-table里面git下来就好了。然后把这两个包分别加入到项目中。
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '/Home/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部门名称'
}, {
field: 'ParentName',
title: '上级部门'
}, {
field: 'Level',
title: '部门级别'
}, {
field: 'Desc',
title: '描述'
}, ]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
return oInit;
};tinkphp6 实现后台查询列表并返回给数据：
if($this->request->isPost()){
$user = $this->viewData['user'];
$search = $this->request->post('search', '');
$order = $this->request->post('order','desc');
$offset = $this->request->post('offset', 0);
$limit = $this->request->post('limit', 10);
$where[] = array('uid' ,"=", $user['id']);
if($search){
$where[] = ['msg','like', "%$search%"];
}
$ret['rows'] = Db::table("event_logs")-> where( $where )
->limit($offset, $limit)->order('id', $order )->select();
/*查询总数*/
$ret['total'] = Db::table("event_logs")->where( $where )->count();
return json($ret);
}
好了，以上即是bootstrap的 使用方法。希望能帮助到您。
