2)
JS DataTables 这个组件绑定数据必须要有自己的返回数据格式。但是ABP返回的格式直接绑定是错误。重写ABP返回格式符合DataTables 要求 。
////// 构造函数 /// /// 请求次数计数器 /// 总共记录数 /// 过滤后的记录数 /// 数据 /// 服务器错误信息 public JsonResult DataTablesResult( int draw, int recordsTotal, int recordsFiltered, IReadOnlyList data, string error = null, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet) { var result = new DataTablesResult (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 { /// /// 请求次数计数器 /// public int Draw { get; set; } /// /// 第一条数据的起始位置 /// public int Start { get; set; } /// /// 每页显示的数据条数 /// public int Length { get; set; } /// /// 数据列 /// public List Columns { get; set; } /// /// 排序 /// public List Order { get; set; } /// /// 搜索 /// public DataTablesSearch Search { get; set; } /// /// 排序字段 /// public string OrderBy { get { return Columns != null && Columns.Any() && Order != null && Order.Any() ? Columns[Order[0].Column].Data : string.Empty; } } /// /// 排序模式 /// public DataTablesOrderDir OrderDir { get { return Order != null && Order.Any() ? Order[0].Dir : DataTablesOrderDir.Desc; } } } public class DataTablesResult{ /// /// 构造函数 /// /// 请求次数计数器 /// 总共记录数 /// 过滤后的记录数 /// 数据 public DataTablesResult(int draw0, int recordsTotal0, int recordsFiltered0, IReadOnlyListdata0) { draw = draw0; recordsTotal = recordsTotal0; recordsFiltered = recordsFiltered0; data = data0; } /// /// 构造函数 /// /// 服务器错误信息 public DataTablesResult(string error0) { error = error0; } ////// 请求次数计数器 /// public int draw { get; set; } ////// 总共记录数 /// public int recordsTotal { get; set; } ////// 过滤后的记录数 /// public int recordsFiltered { get; set; } ////// 数据 /// public IReadOnlyListdata { get; set; } /// /// 错误信息 /// public string error { get; set; } }
/* 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%;} 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": " 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 ' '; }, "bSortable": false } ], "columns": [ { "sWidth": "30px" }, { "data": "FileName", "bSortable": false }, { "data": "FileSize", "bSortable": false }, { "data": "Remarks", "bSortable": false }, { "data": "CreateTime", "bSortable": false }, { "sDefaultContent": ' \ \ \ ', "sWidth": "100px", "bSortable": false } ] }); { "sProcessing": "正在加载数据...", "sLengthMenu": "显示_MENU_条 ", "sZeroRecords": "没有您要搜索的内容", "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", "sInfoFiltered": "(全部记录数 _MAX_ 条)", "sEmptyTable": " 没有数据 ", "sInfoPostFix": "", "sLoadingRecords": "载入中...", "sSearch": "搜索", "sUrl": "", "oPaginate": { "sFirst": "首页", "sPrevious": "上页 ", "sNext": " 下页 ", "sLast": "尾页 " }, "oAria": { "sSortAscending": "以升序排列此列", "sSortDescending": "以降序排列此列" }} 