jqueryangulartypescriptdatatablesangular-datatables

Angular Datatables - fnInfoCallback equivalent

Scenario in jQuery

Formerly in jQuery I would achieve the following depicted in the image below:

enter image description here

Each Tab contains a datatable and the value shown against the tab name is the count of the number of records filtered for the datatable which is displayed by the datatable as shown below:

enter image description here

In jQuery I would achieve this by adding the following callback (fnInfoCallback) in my datatable initialization

$('#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;
    }
});

so as to access the following field (recordsFiltered) which is the datatable response from the server:

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

  ]
}

Problem Statement

I am using the following library for Angular Datatables https://l-lin.github.io/angular-datatables in my Angular 8 app.

So now I would wish to achieve the same using Angular Datatables. I have searched their examples but haven't found anything to do with such a callback. How can I achieve that?

Solution

  • Angular Datatables has a Settings interface as below:

    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;
    
}

    I have truncated some of the settings because the list is huge and just left the familiar ones. Seems they did a pretty good job here.

    Of interest is the infoCallback and I used it as follows (just as you'd use it in 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 this.recordCount = iTotal; stores the number of records filtered to the this.recordCount field.

    The in my html, this is how I used the recordCount field where dtTableNew, dtTableInProgress and dtTableCompleted are all instances of my implementation of a custom datatable object.

    <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active show" data-toggle="tab" href="#new-upload">New <span class="badge badge-pill badge-danger">{{dtTableNew.recordCount}}</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#in-progress">In progress <span class="badge badge-pill badge-warning">{{dtTableInProgress.recordCount}}</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#completed">Completed <span class="badge badge-pill badge-success">{{dtTableCompleted.recordCount}}</span></a>
    </li>
</ul>

    This is what triggered my solution The old AngularJS API Documentation