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",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
        cache: false,//是否使用缓存，默认为true
        search: true,//是否搜索
        pagination: true,//是否分页
        pageSize: 5,//单页记录数
        pageNumber: 1,//初始化加载第一页，默认第一页
        pageList: [5, 10, 20, 50],//分页步进值
        sidePagination: "server",//分页方式：client客户端分页，server服务端分页
        paginationFirstText: "首页",
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        paginationLastText: "末页",
        clickToSelect: true,//是否启用点击选中行
        dataType: "json",//期待返回数据类型
        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",//查询参数组织方式
        queryParams: function getParams(params) {
                //自定义传递参数
                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>