bootstrapTable

<div class="container">
    <div id="toolbar">
        <button id="remove" class="btn btn-danger" disabled>
            <i class="glyphicon glyphicon-remove"></i> Delete
        </button>
    </div>
    <table id="mytable">
        <thead>
            <tr>
                <th data-field="rowid" data-checkbox="true"></th>
                <th data-field="Name" data-editable="true">部門名稱</th>
                <th data-field="ParentName">上級部門</th>
                <th data-field="Level" data-editable="true">部門級別</th>
                <th data-field="Desc" data-editable="true">描述</th>
            </tr>
        </thead>
    </table>
</div>
<link rel="stylesheet" href="common/bootstrap-table/bootstrap-table.css">
<link rel="stylesheet" href="common/bootstrap-table/bootstrap-editable.css">
<script type="text/javascript" src="common/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="common/bootstrap-table/bootstrap-editable.js"></script>
<script type="text/javascript" src="common/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<script>
    $('#mytable').bootstrapTable({
        url: 'test_table',         //請求后臺的URL（*）
        dataField: "rows",//服務端返回數(shù)據(jù)鍵值 就是說記錄放的鍵值是rows，分頁時使用總記錄數(shù)的鍵值為total
        cache: false,//是否使用緩存，默認為true
        search: true,//是否搜索
        pagination: true,//是否分頁
        pageSize: 5,//單頁記錄數(shù)
        pageNumber: 1,//初始化加載第一頁，默認第一頁
        pageList: [5, 10, 20, 50],//分頁步進值
        sidePagination: "server",//分頁方式：client客戶端分頁，server服務端分頁
        paginationFirstText: "首頁",
        paginationPreText: "上一頁",
        paginationNextText: "下一頁",
        paginationLastText: "末頁",
        clickToSelect: true,//是否啟用點擊選中行
        dataType: "json",//期待返回數(shù)據(jù)類型
        method: "get",//請求方式
        searchAlign: "left",//查詢框對齊方式
        locale: "zh-CN",//中文支持,
        detailView: true, //是否顯示詳情折疊
        detailFormatter: function(index, row, element) {
                var html = '';
                $.each(row, function(key, val){
                    html += "<p>" + key + ":" + val +  "</p>"
                });
                return html;
        },
        queryParamsType: "limit",//查詢參數(shù)組織方式
        queryParams: function getParams(params) {
                //自定義傳遞參數(shù)
                params.other = "otherInfo";
                return params;
            },
        searchOnEnterKey: false,//回車搜索
        showRefresh: true,//刷新按鈕
        showColumns: true,//列選擇按鈕
        buttonsAlign: "left",//按鈕對齊方式
        toolbar: "#toolbar",//指定工具欄
        toolbarAlign: "right",//工具欄對齊方式
        columns: [
            {
                field: "rowid",
                title: "全選",
                checkbox: true,
            },
            {
                field: 'Name',
                title: '部門名稱',
                editable:true
            }, {
                field: 'ParentName',
                title: '上級部門'
            }, {
                field: 'Level',
                title: '部門級別'
            }, {
                field: 'Desc',
                title: '描述'
            },
        ]
    });
</script>