Angular 数据表 - fnInfoCallback 等效项

Question

jQuery

中的场景

以前在 jQuery 中，我将实现下图中描述的以下内容：

每个选项卡包含一个数据表，选项卡名称显示的值是数据表显示的数据表过滤记录数的计数，如下所示：

在 jQuery 中，我将通过在我的数据表初始化中添加以下回调 (fnInfoCallback) 来实现此目的

$('#mydatatable').dataTable({
    sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
    "processing": true,
    "serverSide": true,
    "order": [[0, "asc"]],
    "columns": [
        { className: "align-middle"},
        { className: "align-middle"},
        { className: "align-middle"},
        { className: "align-middle"},
        { className: "align-middle"},
        { className: "align-middle"}
    ],
    "ajax": {
        "url": "api/dt",
        "data": function (d) {
            d.status = "new";
        }
    },
    "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
        $scope.newCount = iTotal;
        return sPre;
    }
});

以便访问以下字段 (recordsFiltered)，这是来自服务器的数据表响应：

// Datatable Response from server
{
      "draw": "2",
      "recordsTotal": "824",
      "recordsFiltered": "82",
      "data": [

  ]
}

问题陈述

我在我的 Angular 8 应用程序中为 Angular Datatables https://l-lin.github.io/angular-datatables 使用以下库。

所以现在我希望使用 Angular Datatables 实现同样的效果。我搜索了他们的示例，但没有发现与此类回调有任何关系。我怎样才能做到这一点？

Answer 1

Angular Datatables 有一个 Settings 界面如下：

interface Settings {  
    /**
     * Feature control the processing indicator. Since: 1.10
     */
    processing?: boolean;        

    /**
     * Feature control DataTables' server-side processing mode. Since: 1.10
     */
    serverSide?: boolean;

    /**
     * Load data for the table's content from an Ajax source. Since: 1.10
     */
    ajax?: string | AjaxSettings | FunctionAjax;

    /**
     * Data to use as the display data for the table. Since: 1.10
     */
    data?: any[];

    /**
     * Data to use as the display data for the table. Since: 1.10
     */
    columns?: ColumnSettings[];

    /**
     * Assign a column definition to one or more columns.. Since: 1.10
     */
    columnDefs?: ColumnDefsSettings[];
    
    /**
     * Initial order (sort) to apply to the table. Since: 1.10
     */
    order?: Array<(number | string)> | Array<Array<(number | string)>>;        

    /**
     * Footer display callback function. Since: 1.10
     */
    footerCallback?: FunctionFooterCallback; 

    /**
     * Table summary information display callback. Since: 1.10
     */
    infoCallback?: FunctionInfoCallback;
   
    /**
     * Row draw callback.. Since: 1.10
     */
    rowCallback?: FunctionRowCallback;
    
}

我删掉了一些设置，因为列表很大，只留下了熟悉的设置。看来他们在这里做得很好。

感兴趣的是 infoCallback，我按如下方式使用它（就像您在 jQuery 中使用它一样）

this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  serverSide: true,
  processing: true,
  order: this.order,
  columnDefs: [
    {className: 'text-right', targets: this.columnAlignment}
  ],
  infoCallback: (oSettings, iStart, iEnd, iMax, iTotal, sPre) => {
    this.recordCount = iTotal;
    return sPre;
  }
};

这个this.recordCount = iTotal;存储过滤到this.recordCount字段的记录数。

这就是触发我的解决方案的原因The old AngularJS API Documentation

Angular 数据表 - fnInfoCallback 等效项

Angular Datatables - fnInfoCallback equivalent

jquery

datatables

typescript

angular-datatables

angular