對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()});
}