最近專案的表格使用了bootstrap-Table控制元件，研究了一下直接上程式碼：

JS程式碼（這個只是客戶端獲取資料並不是服務端）：

function initTable() {
    jQuery.ajax({
        url: "ashx/GuideManagement.ashx", 
        type: "post",
        dataType: "json",
        data: { Action: "GuideManagementCheck", AjaxFllage: true },
        success: function (value) {
            var obj = [];   
            for (var i = 0; i < value.length; i++) {
                obj.push(value[i]); //
 
由於傳回的JSON資料是被封裝成了一個Object型別的資料傳回，所以這裡需要用一個數組型別接收

            }
            $table = $('#tb_departments').bootstrapTable({
                data: obj,   //最終的JSON資料放在這裡

                height: $(window).height() - 100,

                striped: true,

                pagination: true,

                pageNumber: 1,

                pageSize: 10,

                pageList: [5, 10, 20],

                search: true,

                showRefresh: true,

                sidePagination: "client",

                showColumns: true,

                minimunCountColumns: 2,

                columns: [{

                    field: 'Name',   //列ID同時也是指定要顯示的資料的ID

                    title: '姓名',

                    width: 100,

                    align: 'center',

                    valign: 'center',

                    sortable: true,

                }, {

                    field: 'IDNumber',

                    title: '身份證號碼',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'GuideCardNumber',

                    title: '導遊證編號',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'TourCompany',

                    title: '導遊公司',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'Time',

                    title: '新增/修改時間',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'Status',

                    title: '是否有效',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'TheRemarks',

                    title: '備註',

                    align: 'center',

                    width: 100,

                    valign: 'center',

                }, {

                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var e = '<button type="button" class="RoleOfD btn btn-default  btn-sm" style="margin-right:15px;" onclick="layer_show(\'' + "修改資訊" + '\',\'' + "Update_GuideManagement.html" + '\',\'' + "" + '\',\'' + "510" + '\',\'' + row.ID + '\')">編輯</button>';
                        var d = '<button type="button" class="RoleOfEdit btn btn-default  btn-sm"  style="margin-right:15px;" onclick="deletedata(\'' + row.ID + '\')">刪除</a> ';
                        return e + d;
 

//這裡是建立一個新的列但是列裡面自定義了兩個按鈕用作業務上的操作。
                    }
                }]
            });
        }
    });
}

注意前臺要有一個table作為容器，如：

<div>

<table id = "tb_departments"></table>

</div>