ASP.NET MVC 5 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[0].Column].Data : string.Empty; } } /// <summary> /// 排序模式 /// </summary> public DataTablesOrderDir OrderDir { get { return Order != null && Order.Any() ? Order[0].Dir : DataTablesOrderDir.Desc; } } }
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; } }
/* 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": "<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 } ] });
{ "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": "以降序排列此列" } }
