Angular Datatables - 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