bootstrap table

最近用bootstrap table，因此放上來記錄一下

HTML

1 <table id="tblAttribute" class="table">
2 </table>

這部分放在哪裏就表明table放在哪裏。我儘可能說詳細一下你們都能明白。

JS

 var SelfAttrTableInit = function () {   
            var oTableInit = new Object();              //初始化table插件
            oTableInit.Init = function () {
                $("#tblAttribute").bootstrapTable({     //經過html的id=tblAttribute觸發這個table
                    method: 'get',                      //請求方式（*）
                    //url: '/adminapi/Attribute/GetSelfDefineAttribute',         //請求後臺的URL（*）
                    queryParams: oTableInit.queryParams,//傳遞參數（*）
                    //queryParamsType:'limit',
                    toolbar: '#toolbar',                //工具按鈕用哪一個容器
                    striped: true,                      //是否顯示行間隔色
                    cache: true,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                    sortable: false,                     //是否啓用排序
                    sortOrder: "asc",                   //排序方式
                    sidePagination: "client",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                    pageNumber: 1,                       //初始化加載第一頁，默認第一頁
                    pageSize: 10,                       //每頁的記錄行數（*）
                    pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                    smartDisplay: false,
                    showRefresh: true,                  //是否顯示刷新按鈕
                    clickToSelect: true,                //是否啓用點擊選中行
                    height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
                    uniqueId: "id",                     //每一行的惟一標識，通常爲主鍵列
                    cardView: false,                    //是否顯示詳細視圖
                    detailView: false,                   //是否顯示父子表
                    pagination: true,                   //是否顯示分頁（*）
　　　　　　　　　　　　//表格顯示的列
                     columns: [{
                        checkbox: true 
                    }, {
                        field: 'id',
                        title: 'id',
                        visible: false
                    }, {
                        field: 'Desc',
                        title: '描述',
                    }, {
                        field: 'Desc_e',
                        title: '描述E',
                    }, {
                        field: 'Desc_c',
                        title: '描述C'
                    }, {
                        field: 'Desc_s',
                        title: '描述S'
                    },
                {
                    field: 'Desc_j',
                    title: '描述J'
                },
                {
                    field: 'IsBatchOrder',
                    title: 'is'
                }]
                });
            };

                         
             //獲得查詢的參數
            oTableInit.queryParams = function (params) {
                return {
                    //name: $("#txtAttributeName").val(),
                    limit: params.limit,  //頁面大小
                    offset: params.offset //頁碼
                };
            }
            return oTableInit;
        }
        $(document).ready(function () {
            InitDateTimePicker();
            var oTable = SelfAttrTableInit();
            oTable.Init();
        });