ASP.NET MVC 5 ABP DataTables （二）

1）ABP DataTables 应用（一）

2)  ABP DataTables 应用（二）

JS DataTables 这个组件绑定数据必须要有自己的返回数据格式。但是ABP返回的格式直接绑定是错误。添加DataTables JS 扩展、数据加载等。ABP 原作者已经在ABP.ZERO CORE 项目有相应的应用。

DataTable JS 扩展：

 /************************************************************************
 * datatables AJAX 扩展                                      *
 *************************************************************************/
 (function ($) {

     if (!$.fn.dataTableExt) {
         return;
     }

     var doAjax = function (listAction, requestData, callbackFunction, settings) {
         var inputFilter = {};

         //设置表过滤器
         if (listAction.inputFilter) {
             inputFilter = $.extend(inputFilter, listAction.inputFilter());
         }

         //设置分页过滤器
         if (settings.oInit.paging) {
             inputFilter = $.extend(inputFilter, {
                 maxResultCount: requestData.length,
                 skipCount: requestData.start
             });
         }

         //排序过滤器
         if (requestData.order && requestData.order.length > 0) {
             var orderingField = requestData.order[0];
             if (requestData.columns[orderingField.column].data) {
                 inputFilter.sorting = requestData.columns[orderingField.column].data + " " + orderingField.dir;
             }
         }

         if (listAction.ajaxFunction) {
             listAction.ajaxFunction(inputFilter)
                 .done(function (result) {
                     settings.rawServerResponse = result;
                     callbackFunction({
                         recordsTotal: result.totalCount, //总数
                         recordsFiltered: result.totalCount,
                         data: result.items //数据项
                     });
                 });
         }
     }

     if (!$.fn.dataTable) {
         return;
     }

     $.extend(true, $.fn.dataTable.defaults, {
         ajax: function (requestData, callbackFunction, settings) {
             if (!settings) {
                 return;
             }

             if (!settings.oInit) {
                 return;
             }

             if (!settings.oInit.listAction) {
                 return;
             }

             doAjax(settings.oInit.listAction, requestData, callbackFunction, settings);
         }
     });
     //重新加载
     $.fn.dataTable.Api.register('ajax.reloadPage()', function () {
         this.ajax.reload(null, false);
     });

 })(jQuery);

DataTables数据加载扩展

 $.extend(true, $.fn.dataTable.defaults, {
        language: {
            url: '/Abp/Framework/scripts/Datatables/Translations/Chinese (Simplified, China).json'
        },
        lengthMenu: [5, 10, 25, 50, 100, 250, 500],
        pageLength: 10,
        responsive: true,
        searching: false,
        pagingType: "bootstrap_full_number",
        dom: 'rt<"bottom"ilp><"clear">',
        order: []
    });

语言列表

 /************************************************************************
 * RECORD-ACTIONS extension for datatables                               *
 *************************************************************************/
 (function ($) {

     if (!$.fn.dataTableExt) {
         return;
     }

     var _createDropdownItem = function (record, fieldItem) {
         var $li = $('<li/>');
         var $a = $('<a/>');

         if (fieldItem.text) {
             $a.html(fieldItem.text);
         }

         if (fieldItem.action) {
             $a.click(function (e) {
                 e.preventDefault();

                 if (!$(this).closest('li').hasClass('disabled')) {
                     fieldItem.action({
                         record: record
                     });
                 }
             });
         }

         $a.appendTo($li);
         return $li;
     }

     var _createButtonDropdown = function (record, field) {
         var $container = $('<div/>')
             .addClass('btn-group')
             .addClass('dropdown')
             .addClass('action-button');

         var $dropdownButton = $('<button/>')
             .html(field.text)
             .addClass('dropdown-toggle')
             .attr('data-toggle', 'dropdown')
             .attr('aria-haspopup', 'true')
             .attr('aria-expanded', 'true');

         if (field.cssClass) {
             $dropdownButton.addClass(field.cssClass);
         }

         var $dropdownItemsContainer = $('<ul/>').addClass('dropdown-menu');

         for (var i = 0; i < field.items.length; i++) {
             var fieldItem = field.items[i];

             if (fieldItem.visible && !fieldItem.visible({ record: record })) {
                 continue;
             }

             var $dropdownItem = _createDropdownItem(record, fieldItem);

             if (fieldItem.enabled && !fieldItem.enabled({ record: record })) {
                 $dropdownItem.addClass('disabled');
             }

             $dropdownItem.appendTo($dropdownItemsContainer);
         }

         if ($dropdownItemsContainer.find('li').length > 0) {
             $dropdownItemsContainer.appendTo($container);
             $dropdownButton.appendTo($container);
         }

         if ($dropdownItemsContainer.children().length === 0) {
             return "";
         }

         return $container;
     };

     var _createSingleButton = function (record, field) {
         $(field.element).data(record);

         if (field.visible === undefined) {
             return field.element;
         }

         var isVisibilityFunction = typeof field.visible === "function";
         if (isVisibilityFunction) {
             if (field.visible()) {
                 return field.element;
             }
         } else {
             if (field.visible) {
                 return field.element;
             }
         }

         return "";
     };

     var _createRowAction = function (record, field, tableInstance) {
         if (field.items && field.items.length > 1) {
             return _createButtonDropdown(record, field, tableInstance);
         } else if (field.element) {
             var $singleActionButton = _createSingleButton(record, field);
             if ($singleActionButton != "") {
                 return $singleActionButton.clone(true);
             }
         }

         return "";
     }

     var hideColumnWithoutRedraw = function (tableInstance, colIndex) {
         tableInstance.fnSetColumnVis(colIndex, false, false);
     }

     var hideEmptyColumn = function(cellContent, tableInstance, colIndex) {
         if (cellContent == "") {
             hideColumnWithoutRedraw(tableInstance, colIndex);
         }
     };

     var renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
         var columns;
         if (tableInstance.aoColumns) {
             columns = tableInstance.aoColumns;
         } else {
             columns = tableInstance.fnSettings().aoColumns;
         }

         if (!columns) {
             return;
         }

         var cells = $(nRow).children("td");

         for (var colIndex = 0; colIndex < columns.length; colIndex++) {
             var column = columns[colIndex];
             if (column.rowAction) {
                 var $actionContainer = _createRowAction(aData, column.rowAction, tableInstance);
                 hideEmptyColumn($actionContainer, tableInstance, colIndex);

                 var $actionButton = $(cells[colIndex]).find(".action-button");
                 if ($actionButton.length === 0) {
                     $(cells[colIndex]).append($actionContainer);
                 }
             }
         }
     };

     var _existingApiRenderRowActionsFunction = $.fn.dataTableExt.oApi.renderRowActions;
     $.fn.dataTableExt.oApi.renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
         if (_existingApiRenderRowActionsFunction) {
             _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
         }

         renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
     };

     if (!$.fn.dataTable) {
         return;
     }

     var _existingDefaultFnRowCallback = $.fn.dataTable.defaults.fnRowCallback;
     $.extend(true, $.fn.dataTable.defaults, {
         fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
             if (_existingDefaultFnRowCallback) {
                 _existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
             }

             renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
         }
     });

 })(jQuery);

数据操作扩展

 {
     "sProcessing":   "处理中...",
     "sLengthMenu":   "显示 _MENU_ 项结果",
     "sZeroRecords":  "没有匹配结果",
     "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
     "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
     "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
     "sInfoPostFix":  "",
     "sSearch":       "搜索:",
     "sUrl":          "",
     "sEmptyTable":     "表中数据为空",
     "sLoadingRecords": "载入中...",
     "sInfoThousands":  ",",
     "oPaginate": {
         "sFirst":    "首页",
         "sPrevious": "上页",
         "sNext":     "下页",
         "sLast":     "末页"
     },
     "oAria": {
         "sSortAscending":  ": 以升序排列此列",
         "sSortDescending": ": 以降序排列此列"
     }
 }

语言 JSON

ABP应用层 （只是做了演示的Demo）

    [AutoMapTo(typeof(Project))]
    public class CreateProjectDto
    {
        public string Name { get; set; }
        public string Address { get; set; }
    }

    public class GetProjectInput : PagedAndSortedResultRequestDto, IShouldNormalize
    {
        public void Normalize()
        {
            if (string.IsNullOrEmpty(Sorting))
            {
                Sorting = "Name";
            }
        }
    }    [AutoMapFrom(typeof(Project)), AutoMapTo(typeof(Project))]
    public class ProjectDto:EntityDto<long>
    {
        public string Name { get; set; }
        public string Address { get; set; }
    }

Dto

    public interface IProjectAppService : IAsyncCrudAppService<ProjectDto, long, PagedResultRequestDto, CreateProjectDto, ProjectDto>
     {
         PagedResultDto<ProjectDto> GetProject(GetProjectInput dto);
     }
   public   class ProjectAppService : AsyncCrudAppService<Project, ProjectDto, long, PagedResultRequestDto, CreateProjectDto, ProjectDto>, IProjectAppService
     {
         public ProjectAppService(IRepository<Project, long> repository) : base(repository)
         {

         }

         public PagedResultDto<ProjectDto> GetProject(GetProjectInput input)
         {
             var query = Repository.GetAllList();
             var queryAllCount = query.Count;

             var users = query.OrderBy(o=>o.Address).Skip(input.SkipCount).Take(input.MaxResultCount)
                 .ToList();

             var projectDotlist = ObjectMapper.Map<List<ProjectDto>>(users);

             return new PagedResultDto<ProjectDto>(queryAllCount, projectDotlist);

         }
     }

AppService

ABP展示层

 @section Scripts{
     <script src="~/lib/datatables/datatables.all.min.js"></script>
     <script src="~/lib/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
     <script src="~/Abp/Framework/scripts/Datatables/datatables.ajax.js"></script>
     <script src="~/Abp/Framework/scripts/Datatables/datatables.defaults.js"></script>
     <script src="~/Abp/Framework/scripts/Datatables/datatables.record-actions.js"></script>
     <script src="~/Views/Projects/index.js"></script>
 }
 @section styles
 {
 <link href="~/lib/datatables/datatables.min.css" rel="stylesheet" />
     <link href="~/lib/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" />
 }
 <div class="row margin-bottom-5">
     <div class="col-xs-6">
         <div class="page-head">
             <div class="page-title">
                 <h1>
                     <span>@L("Project")</span> <small>@L("ProjectHeaderInfo")</small>
                 </h1>
             </div>
         </div>
     </div>
 </div>

 <div class="portlet light margin-bottom-0">
     <div class="portlet-title portlet-title-filter">
         <div class="inputs inputs-full-width">
             <div class="portlet-input">
                 <form>
                     <div class="row">
                         <div class="col-xs-6">

                         </div>
                         <div class="col-xs-6">
                             <div class="form-group">
                                 <button id="RefreshProjectButton" class="btn btn-primary blue"><i class="fa fa-refresh"></i> @L("Refresh")</button>
                             </div>
                         </div>
                     </div>
                 </form>
             </div>
         </div>
     </div>
     <div class="portlet-body">
         <table id="ProjectTable"  class="table table-striped table-bordered table-hover order-column">
             <thead>
                 <tr>
                     <th>@L("Actions")</th>
                     <th>@L("RoleName")</th>
                     <th>@L("CreationTime")</th>
                 </tr>
             </thead>
         </table>
     </div>
 </div>

View

 (function () {
     $(function () {
         var _$projectsTable = $('#projectsTable');
         var _projectService = abp.services.app.project;
         var dataTable = _$projectsTable.DataTable({
             paging: true,
             serverSide: true,
             processing: false,
             listAction: {
                 ajaxFunction: _projectService.getProject
             },
             columnDefs: [
                 {
                     targets: 0,
                     data: null,
                     orderable: false,
                     autoWidth: false,
                     defaultContent: '',
                     rowAction: {
                         cssClass: 'btn btn-xs btn-primary blue',
                         text: '<i class="fa fa-cog"></i> ' + 'Actions' + ' <span class="caret"></span>',
                         items: [
                        ]
                     }
                 },
                 {
                     targets: 1,
                     data: "name"

                 },
                 {
                     targets: 2,
                     data: "address"
                 }
             ]
         });
         $('#RefreshprojectsButton').click(function (e) {
             e.preventDefault();
             getprojects();
         });
         function getprojects() {
             dataTable.ajax.reload();
         }
     });
 })();

JavaScript

然后调试数据展示成功。