关于bootstrapTable的高级玩法

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