对Bootstrap Table 表格进行封装

(function () {
    var BSTable = function (bstableId, url, columns,queryParamsType,countSize) {
        this.btInstance = null;					//jquery和BootStrapTable绑定的对象
        this.bstableId = bstableId;
        this.url =  url;
        this.method = "post";
        this.paginationType = "server";			//默认分页方式是服务器分页,可选项"client"   如果 设置 sidePagination: "server", 必须包含 total 和 rows;  如果直接返回的是数组 需要设置为 sidePagination: "client"
        this.toolbarId = bstableId + "Toolbar";
        this.columns = columns;
        this.height = 665;						
        this.data = {};
        this.queryParams = {}; // 向后台传递的自定义参数
        if (countSize==undefined){
            this.countSize=10;
        }else{
            this.countSize=countSize;
        }
        if(queryParamsType==undefined){
            this.queryParamsType='limit'
        }else{
            this.queryParamsType=queryParamsType
        }
    };

    BSTable.prototype = {
        /**
         * 初始化bootstrap table
         */
        init: function () {
            var tableId = this.bstableId;
            var me = this;
            this.btInstance =
                $('#' + tableId).bootstrapTable({
                    contentType: "application/x-www-form-urlencoded",
                    url: this.url,				//请求地址
                    method: this.method,		//ajax方式,post还是get
                    ajaxOptions: {				//ajax请求的附带参数
                        data: this.data
                    },
                    toolbar: "#" + this.toolbarId,//顶部工具条
                    striped: true,     			//是否显示行间隔色
                    cache: false,      			//是否使用缓存,默认为true
                    pagination: true,     		//是否显示分页（*）
                    sortable: true,      		//是否启用排序
                    // sortOrder: "desc",     		//排序方式
                    pageNumber: 1,      			//初始化加载第一页，默认第一页
                    pageSize: this.countSize,      			//每页的记录行数（*）
                    pageList: [10, 20, 50,100],  	//可供选择的每页的行数（*）
                    queryParamsType: this.queryParamsType, 	//默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                    queryParams: function (param) {
                        if(this.queryParamsType=='limit'){
                            return $.extend(me.queryParams, param);
                        }else{
                            //因为layui table 传参不一样
                            return $.extend(me.queryParams, {
                                'page':param.pageNumber,
                                'limit':param.pageSize
                            });
                        }

                    }, // 向后台传递的自定义参数
                    sidePagination: this.paginationType,   //分页方式：client客户端分页，server服务端分页（*）
                    search: false,      		//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                    strictSearch: true,			//设置为 true启用 全匹配搜索，否则为模糊搜索
                    showColumns: true,     		//是否显示所有的列
                    showRefresh: true,     		//是否显示刷新按钮
                    minimumCountColumns: 2,    	//最少允许的列数
                    clickToSelect: true,    	//是否启用点击选中行
                    searchOnEnterKey: true,		//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
                    columns: this.columns,		//列数组
                    // height: this.height,
                    icons: {
                        refresh: 'glyphicon-repeat',
                        toggle: 'glyphicon-list-alt',
                        columns: 'glyphicon-list'
                    },
                    iconSize: 'outline'
                });
            return this;
        },
        /**
         * 向后台传递的自定义参数
         * @param param
         */
        setQueryParams: function (param) {
            this.queryParams = param;
        },
        /**
         * 设置分页方式：server 或者 client
         */
        setPaginationType: function (type) {
            console.log(type)
            this.paginationType = type;
        },
        setHeight: function (type) {
            this.height = type;
        },

        /**
         * 设置ajax post请求时候附带的参数
         */
        set: function (key, value) {
            if (typeof key == "object") {
                for (var i in key) {
                    if (typeof i == "function")
                        continue;
                    this.data[i] = key[i];
                }
            } else {
                this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
            }
            return this;
        },

        /**
         * 设置ajax post请求时候附带的参数
         */
        setData: function (data) {
            this.data = data;
            return this;
        },

        /**
         * 清空ajax post请求参数
         */
        clear: function () {
            this.data = {};
            return this;
        },

        /**
         * 刷新 bootstrap 表格
         * Refresh the remote server data,
         * you can set {silent: true} to refresh the data silently,
         * and set {url: newUrl} to change the url.
         * To supply query params specific to this request, set {query: {foo: 'bar'}}
         */
        refresh: function (parms) {
            if (typeof parms != "undefined") {
                this.btInstance.bootstrapTable('refresh', parms);
            } else {
                this.btInstance.bootstrapTable('refresh');
            }
        }
    };

    window.BSTable = BSTable;

}());

　1.使用方法 把封装好的js 引入到页面中

var pageObj={
    table:null,
    id:"exampleTable",//要渲染的table id
    url: "", //请求路径
}

/*

*初始化表格的列

* */
pageObj.initColumn = function () {
    return[
        {
            field: 'username',
            title: '名字',
            align: 'center',
        },
　　　　]
}
//设置传参

pageObj.formParams = function () {

    var queryData = {};

    queryData['searchWord'] = $("#searchWord").val();

    return queryData;
};

$(function () {
    load();
});
//初始化表格
function load() {
    var defaultColunms = pageObj.initColumn();
    var table = new BSTable(pageObj.id, pageObj.url, defaultColunms);
    pageObj.table = table.init();
}
//reLoad 更新表格

function reLoad() {
    pageObj.table.refresh({query: pageObj.formParams()});
}