ASP.NET MVC 5 ABP DataTables （一）

1）ABP DataTables 应用（一）

2)  ABP DataTables 应用（二）

JS DataTables 这个组件绑定数据必须要有自己的返回数据格式。但是ABP返回的格式直接绑定是错误。重写ABP返回格式符合DataTables 要求 。

  /// <summary>
        /// 构造函数
        /// </summary>
        /// <param name="draw">请求次数计数器</param>
        /// <param name="recordsTotal">总共记录数</param>
        /// <param name="recordsFiltered">过滤后的记录数</param>
        /// <param name="data">数据</param>
        /// <param name="error">服务器错误信息</param>
        public JsonResult DataTablesResult<TEntity>(
            int draw,
            int recordsTotal,
            int recordsFiltered,
            IReadOnlyList<TEntity> data,
            string error = null,
            JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
        {
            var result = new DataTablesResult<TEntity>(draw, recordsTotal, recordsFiltered, data);
            return DataTableJson(result, null, Encoding.UTF8, behavior);
        }
        public virtual JsonResult DataTableJson(
            object data,
            string contentType = null,
            Encoding contentEncoding = null,
            JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
        {

            return new JsonResult()
            {
                Data = data,
                ContentType = contentType,
                ContentEncoding = contentEncoding,
                JsonRequestBehavior = behavior
            };
        }

    public class DataTablesParameters
    {
        /// <summary>
        ///     请求次数计数器
        /// </summary>
        public int Draw { get; set; }

        /// <summary>
        ///     第一条数据的起始位置
        /// </summary>
        public int Start { get; set; }

        /// <summary>
        ///     每页显示的数据条数
        /// </summary>
        public int Length { get; set; }

        /// <summary>
        ///     数据列
        /// </summary>
        public List<DataTablesColumns> Columns { get; set; }

        /// <summary>
        ///     排序
        /// </summary>
        public List<DataTablesOrder> Order { get; set; }

        /// <summary>
        ///     搜索
        /// </summary>
        public DataTablesSearch Search { get; set; }

        /// <summary>
        ///     排序字段
        /// </summary>
        public string OrderBy
        {
            get
            {
                return Columns != null && Columns.Any() && Order != null && Order.Any()
                    ? Columns[Order[].Column].Data
                    : string.Empty;
            }
        }

        /// <summary>
        ///     排序模式
        /// </summary>
        public DataTablesOrderDir OrderDir
        {
            get
            {
                return Order != null && Order.Any()
                    ? Order[].Dir
                    : DataTablesOrderDir.Desc;
            }
        }
    }

DataTablesParameters

public class DataTablesResult<TEntity>
    {

        /// <summary>
        ///     构造函数
        /// </summary>
        /// <param name="draw0">请求次数计数器</param>
        /// <param name="recordsTotal0">总共记录数</param>
        /// <param name="recordsFiltered0">过滤后的记录数</param>
        /// <param name="data0">数据</param>
        public DataTablesResult(int draw0, int recordsTotal0, int recordsFiltered0, IReadOnlyList<TEntity> data0)
        {
            draw = draw0;
            recordsTotal = recordsTotal0;
            recordsFiltered = recordsFiltered0;
            data = data0;
        }

        /// <summary>
        ///     构造函数
        /// </summary>
        /// <param name="error0">服务器错误信息</param>
        public DataTablesResult(string error0)
        {
            error = error0;
        }

        /// <summary>
        ///     请求次数计数器
        /// </summary>
        public int draw { get; set; }

        /// <summary>
        ///     总共记录数
        /// </summary>
        public int recordsTotal { get; set; }

        /// <summary>
        ///     过滤后的记录数
        /// </summary>
        public int recordsFiltered { get; set; }

        /// <summary>
        ///     数据
        /// </summary>
        public IReadOnlyList<TEntity> data { get; set; }

        /// <summary>
        ///     错误信息
        /// </summary>
        public string error { get; set; }
    }

DataTablesResult

/* dataTables列内容居中 */
.table { width: 100% !important;}
.table > tbody > tr > td {overflow: hidden; text-overflow: ellipsis;}
.table > thead > tr > th {text-align: center;}
.table > tbody > tr > td {text-align: center;}
/* dataTables表头居中 */
.dataTables_scrollHead, .dataTables_scrollBody { border-bottom: 0px !important;}
.dataTables_scrollHeadInner, #InspectionRecordTable {border-bottom: 1px solid #e7ecf1 !important;margin: 0 !important;}
.scrolltable {height: 350px;overflow-x: hidden;overflow-y: auto;width: 100%;}

CSS

 var table = $('#MI_InspectionPlanTable');
   table.dataTable({
            // Internationalisation. For more info refer to http://datatables.net/manual/i18n
            "language": {
                "url": '/Scripts/datatables/DataTable_language.json'
            },
            "bStateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
            "sScrollX": "100%", //DataTables的宽
            "aLengthMenu": [10, 20, 60], //更改显示记录数选项
            "iDisplayLength": 10, //默认显示的记录数
            "bAutoWidth": true, //是否自适应宽度
            "bPaginate": true, //是否显示（应用）分页器
            "bInfo": false, //是否显示页脚信息，DataTables插件左下角显示记录数
            "sPaginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
            "bSort": false, //是否启动各个字段的排序功能
            "ordering": false,
            "bFilter": false, //是否启动过滤、搜索功能
            "bProcessing": false, //DataTables载入数据时，是否显示‘进度’提示
            //当前这个进度显示有问题 需要调整
            "serverSide": true,//true代表后台处理分页，false代表前台处理分页
            "dom": "<f<t>ip>",
            "ajax": {
                "url": "/main/InspectionPlan/GetMI_InspectionPlanAll",
                "type": "post",
                "data": function (d) {
                    d.ModelType = 0;
                    d.FileType = fileType;
                },
                "error": handleAjaxError()

            },
            "columnDefs":
            [

                {
                    "targets": 0,
                    "render": function (data, type, meta) {
                        return '<input type="checkbox" class="checkboxes"  name="selected" value="' + meta.Id + '"  id="checkbox" />';
                    },
                    "bSortable": false
                }
            ],
            "columns": [
                {
                    "sWidth": "30px"
                },
                { "data": "FileName", "bSortable": false },
                { "data": "FileSize", "bSortable": false },
                { "data": "Remarks", "bSortable": false },
                { "data": "CreateTime", "bSortable": false },
                {
                    "sDefaultContent": '<div class="input-group-btn">\
                                    <button type="button" class="btn green-sharp Edit" title="编辑">\
                                    <i class="fa fa-edit"></i>\
                                    </button><span style="margin-left: 5px;"></span>     \
                                    <button type="button" class="btn blue-steel Delete" title="删除">\
                                    <i class="fa fa-trash-o"></i>\
                                    </button>\
                                    </div>',
                    "sWidth": "100px",
                    "bSortable": false
                }
            ]
        });

JS

{
  "sProcessing": "正在加载数据...",
  "sLengthMenu": "显示_MENU_条 ",
  "sZeroRecords": "没有您要搜索的内容",
  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
  "sInfoFiltered": "(全部记录数 _MAX_  条)",
  "sEmptyTable": "<div style='margin:0 auto;text-align:center;'>没有数据</div>",
  "sInfoPostFix": "",
  "sLoadingRecords": "载入中...",
  "sSearch": "搜索",
  "sUrl": "",
  "oPaginate": {
    "sFirst": "首页",
    "sPrevious": "上页 ",
    "sNext": " 下页 ",
    "sLast": "尾页 "
  },
  "oAria": {
    "sSortAscending": "以升序排列此列",
    "sSortDescending": "以降序排列此列"
  }
}

DataTables 汉化