0x01 比较low的tables
之前在各大项目里面，用的最多的是datatables，因为这个玩意可以让你偷懒，不用写分页功能，坏处就是一次性加载所有数据，对性能略有影响。对于数据量不是特别大的情况下，datatables其实挺好的，但是对于各个bootstrap模版之间的兼容性，这个玩意就比较悲剧了，而且，改起来特别费劲。然后就有了替代的想法，构建一个自己长期使用、可维护性高的tables插件就是成为了我一直追求的目标。后来在研究某个bt模版的时候，发现bootstrapTable其实也很牛逼，所以有了这篇文章。
0x02 代码走你
且不说别的，先上自己封装好的代码。
/*
*
* Copyright (c) 2016
* Author: Smarttang
* Github: https://github.com/smarttang/
* ======
* 用于列表插件的汇聚
*/
var tables;
(function(){
"use strict";
tables = {
// 构建表格
draw: function(params)
{
// 节点判断
var _node = document.getElementById(params.ElementId);
// 判断是否存在
if (_node){
$('#'+params.ElementId).bootstrapTable({
method: 'POST',
dataType: "json",
url: params.remoteUrl,
search: true, //是否显示搜索框功能
pagination: true, //是否分页
showRefresh: true, //是否显示刷新功能
showColumns: true,
queryParams: params.queryParas, //参数
silent: true, //刷新事件必须设置
iconSize: 'outline',
detailView: false,
contentType: 'application/x-www-form-urlencoded',
columns: params.columnsList,
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
responseHandler: params.responseED,
formatLoadingMessage: function () {
return "请稍等，正在加载中...";
},
formatNoMatches: function () { //没有匹配的结果
return '无符合条件的记录';
},
onLoadSuccess: function(){
$("[data-toggle='tooltip']").tooltip();
}
});
}
},
// 刷新表格
refresh: function(id)
{
$('#'+id).bootstrapTable('refresh');
}
}
})(jQuery);
代码特别简单，没有特别复杂的东西，简单说下这个插件上，我摸的一些坑。第一个坑在contentType上，这个值比较奇葩，在请求的过程里面，默认我的请求是以form的方式进行请求的，而默认的情况下，它的请求是text/html,导致一直在后端获取不到值。
正常的request
只有这种情况下，请求才是正确的。会是以下的请求～
params值
这个坑略悲剧，还好调的时候认真看了下才发现的。。
0x03 结束
这个插件感觉比datatables好用，而且相对比较灵活丰满些。在各个模版上兼容比较好。推荐使用吧～
0x04 参考
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
http://www.tuicool.com/articles/aAB7fei
