Bootstrap表格的使用

先定义前端table

<table class="table table-striped table-bordered table-hover" id="expandabledatatable"></table>

然后是JS

/*
             * 初始化表格
             */
            var oTable = $('#expandabledatatable').dataTable({
                "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
                "aoColumnDefs": [
                    {
                        "bSortable": false, "aTargets": [0],
                        "render": function (data, type, full) {
                            return '<i class="fa fa-plus-square-o row-details"></i>';
                        }
                    },
                    { "aTargets": [1], "data": "TaskName", "title": "任务名称" },
                    { "aTargets": [2], "data": "CronExpression", "title": "表达式" },
                    { "aTargets": [3], "data": "Remark", "title": "说明" },
                    {
                        "bSortable": false, "aTargets": [4], "title": "运行状态",
                        "render": function (data, type, full) {
                            if (full["Enabled"]==true){
                                return '<button type="button" class="btn btn-success btn-sm">运行</button>';
                            }
                            else {
                                return '<button type="button" class="btn btn-warning btn-sm">停止</button>';
                            }
                        }
                    },
                    {
                        "bSortable": false, "aTargets": [5],
                        "render": function (data, type, full) {
                            return '<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> 编辑</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>';
                        }
                    }

                ],
                "bServerSide": true,
                "sAjaxSource": "/Task/GetAllTask",
                "aaSorting": [[1, 'asc']],
                "aLengthMenu": [
                   [5, 15, 20, -1],
                   [5, 15, 20, "All"]
                ],
                "iDisplayLength": 5,
                "searching": false,
                "bLengthChange": false,
                "language": {
                    "sProcessing": "正在加载数据...",
                    "sInfoEmpty": "记录数为0",
                    "sInfoFiltered": " 从 _MAX_ 条过滤",
                    "sZeroRecords": "没有您要搜索的内容",
                    "search": "",
                    "sLengthMenu": "_MENU_",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "oPaginate": {
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                    }
                },

                "fnServerData": function (sSource, aoData, fnCallback) {

                    $.ajax({

                        "type": 'post',

                        "url": sSource,

                        "dataType": "json",

                        "data": {

                            aoData: JSON.stringify(aoData)

                        },

                        "success": function (resp) {

                            fnCallback(resp);

                        }

                    });

                }
        
              
             });

该表格的数据是从服务器端取得，所以必须配置下面这些属性，否则无法从服务器端获得数据

"bServerSide": true,
"sAjaxSource": "/Task/GetAllTask",



"fnServerData": function (sSource, aoData, fnCallback) {

$.ajax({

"type": 'post',
"url": sSource,
"dataType": "json",
"data": {
aoData: JSON.stringify(aoData)
},
"success": function (resp) {
fnCallback(resp);
}
});
}