Angular Datatables - Equivalent function for fnInfoCallback

Scenario using Angular Datatables

In my previous experience with jQuery, I was able to accomplish the functionality shown in the images below:

https://i.sstatic.net/VoT2A.png

Each Tab displayed a datatable, with the count of filtered records shown next to the tab name. The datatable itself displayed the filtered data as demonstrated here:

https://i.sstatic.net/DtOTR.png

To achieve this in jQuery, I utilized the fnInfoCallback callback during the initialization of my datatable.

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

This allowed me to access the recordsFiltered field in the server's datatable response.

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

Challenge Encountered

I am currently utilizing the Angular Datatables library in my Angular 8 application. Here is the link to the library: .

However, I am unsure how to replicate the same functionality using Angular Datatables. Despite searching through their examples, I have not been able to find anything related to such callback operations. Can you provide guidance on how I can achieve this?

jqueryangulartypescriptdatatablesangular-datatables

Answer №1

Angular Datatables provides a Settings interface with various options:

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[];

    /**
     * Define columns 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;
    
}

Some settings have been omitted due to space constraints, focusing on key ones.

The infoCallback is utilized in the following manner within the Angular application:

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

The line this.recordCount = iTotal; stores the total number of filtered records in the this.recordCount field.

Usage of the recordCount field within the HTML is demonstrated below, with instances of custom datatable objects:

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

Further details can be found in the AngularJS API Documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating the challenges of time zones when calculating lag times

I am currently attempting to calculate the lag in milliseconds between my client (located in France) and my server (based in Germany). On the Client side (Using Angular Typescript) : this.http.getDate().subscribe(response => { if (respo ...

javaangulartypescript

Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the back ...

cssangularangular12

Determine the size of a JSON object without converting it into a string

Is there a method to determine the size of a JSON object in megabytes without converting it into a string? I am aware of using JSON.parse(data).length to calculate the size in bytes, but parsing large data sets is time-consuming and not ideal for my need ...

javascriptjquerynode.jsjson

Utilize JSON configuration file to extract parameters for Protractor testing

Is there a way to access file values from protractor.config.ts without passing them as command line arguments? I have commented out the lines that attempt to read the files. protractor.config.ts import { } from 'jasmine'; import { Config } from ...

node.jstypescriptprotractor

The <g> tag fails to properly render within the <svg> element in Firefox

When running an Angular 6 application with ES6-style D3js modules, there are some issues on Firefox (Chromium, Chrome, Safari, and IE Edge work fine). Below is a sample of pseudo code (full production code is available below): <svg width="500" height=" ...

javascriptangularfirefoxd3.jssvg

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

javascriptjqueryhtmltriggersclick

How to generate a dropdown menu using a deeply nested JSON array

I'm looking to create a series of drop-down lists based on the JSON array provided below. There will be five drop-down lists, and when I select an option in one list, the other four should populate accordingly. For example, if I choose "Hindi" in the ...

javascriptjqueryjson

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

An undefined PHP index error was encountered by Ajax, while the other one did not face the same issue

I encountered an issue with ajax where I am receiving an undefined index error on my variables when making a call. Strangely, I have other ajax calls functioning perfectly fine across my website except for this particular one which is giving me troubles. I ...

phphtmljqueryajax

Tips for accurately mapping JSON from an Angular 5 POST request to a Java entity with RestEasy integration

Below is code snippet from an Angular 5 component: export class TripsComponent implements OnInit { ... ... addTrip() { let newTrip = new Trip(this.new_trip_name, this.new_trip_description, this.company); this.tripService.addTrip(newTrip).t ...

angularrestresteasy

Toggle the submit button using jQuery based on the comparison of the jml_automatic field with the id_km field

I recently learned jQuery last month, and now I am working on a form using jQuery to allow users to input gas requests. However, the script is not working to compare the values from #jml_km with #id_km, and the submit button is still not disabled when the ...

javascriptphphtmljquerybutton

Angular mat-table experiencing issues with matToolTip functionality

My Angular project is using Angular Material 16x, but for some reason, the matToolTip is not displaying at all. I have experimented with various versions, including a basic matTooltip="hello world", but I just can't seem to get it to work. I have come ...

angulartypescriptangular-material

Updating information without the need for a page refresh

My project involves text boxes and drop-down menus where users input data, then click "generate" to combine the text from the boxes and display the result on the page. I'm struggling with clearing these results if the user clicks generate again, for ...

javascriptjqueryhtmlforms

How to interact with a specific button using Javascript

I need to use jQuery to target the button below: <button id="mybutton" book_title="{{$book->title}}" author="{{$book->author}}" idx="{{$book->id}}" class="btn btn-success b_r_20 btn-xs pull-right" > ...

javascriptjqueryhtml

Positioning the jQuery mobile navBar to be fixed on iOS 4 devices

Currently working on a mobile app with jquery using iOS4 and iOS5 compatibility as the final hurdle. While fixing the navigation bar is simple on iOS5 with position:fixed, it's not as straightforward on iOS4! I've experimented with various soluti ...

jquerycssxcodehtmljquery-mobile

Discover a more efficient method for expanding multiple interfaces

Hey there, I'm having some trouble with TypeScript and generics. Is there a better way to structure the following code for optimal cleanliness and efficiency? export interface Fruit { colour: string; age: number; edible: boolean; } export inte ...

typescripttypesinterface

Angular 4 - Resolve ngModelChange Error: Property '...'is Undefined When Binding Two Select Form

I need assistance with implementing a functionality in Angular 4. I have a JSON model that contains information about books, including their titles and authors. I want to create two select form elements (dropdowns): the first dropdown should display the ti ...

angulardrop-down-menuundefinedangular-ngmodelchange

Angular component receives only initial value from BehaviorSubject

I am facing an unusual issue where I have created a service to emit the value of the item clicked on the navbar in order to trigger a modal. import { EventEmitter, Injectable } from "@angular/core"; import { BehaviorSubject, Subject } from " ...

angularangular-componentssubscribebehaviorsubject

PHP AJAX POST not functioning as expected

Can someone please help me with my AJAX code issue? I've created many posts before, so I'm confused about why this one isn't working. Here is the code: $(function() { $("#btnSubmit").click(function(event) { event.preventDefault(); ...

phpjqueryajaxpost

Ways to dynamically update the state of a mat-button-toggle-group programmatically

I'm currently working on implementing a confirmation dialog to change the state of MatButtonToggleGroup. However, I am facing an issue where I need to prevent the default behavior unless I revert to the previous state upon cancellation. Here's t ...

angularangular-material