How to render multiple datatables on the same page?

[Crimsonpixie]

I am using angular datatables in Angular 9. I am using different dtTriggers for both the tables.

<table id="incidentsTable" #incidentsTable class="table table-striped" datatable [dtOptions]="dtOptionsInc" [dtTrigger]="dtTriggerInc">

<table id="notificationsTable" #notificationsTable class="table table-striped" datatable [dtOptions]="dtOptionsNot" [dtTrigger]="dtTriggerNot">

But the issue is that when I use use pagination for the tables, the getPage() functions of both the tables are returning same page number.

` initializeSite() {

this.initially = true;

const colOrder = [

  // tslint:disable-next-line:max-line-length

  'IncidentUid', 'CreatedOn', 'LocationName', 'DivisionName', 'Severity', 'ReportedBy', 'ResolvedOn', 'SimilarIncidentsCount', 'AssignedToName', 'Comments', 'IncidentStatus', 'Action'

]; 

const $this = this;

this.dtOptionsInc = {

  stateSave: true,

  stateSaveCallback: function (settings, data) {

    localStorage.setItem(constants.DATA_TABLE_STATES.INCIDENTS, JSON.stringify(data));

  },

  stateLoadCallback: function (settings) {

    return JSON.parse(localStorage.getItem(constants.DATA_TABLE_STATES.INCIDENTS));

  },

  autoWidth: false,

  pagingType: 'full_numbers',

  language: {

    'emptyTable': 'No data available'

  },

  order: [1, 'desc'],

  columnDefs: [

    {

      targets: [9,11],

      orderable: false,

    }

  ],

  dom: 'Blfrtip',

  buttons: [

    {

      text: 'Export to CSV',

      class: 'dt-buttons.buttons-right',

      action: function(e, dt, node, config) {

        console.log('Exporting to CSV...');

        $this.exportData();

      }

    },

    {

      extend: 'colvis',

      text: '<i class="fa fa-list-alt" aria-hidden="true"></i>',

      className: "btn btn-outlined",

      align: 'button-right',

      columns: [1,2,3,4,5,6,7,8,9,10]

    },

  ],

  serverSide: true,

  ajax: (dataTablesParameters: any, callback) => {

    this.searchTerm = dataTablesParameters.search.value;

    const sortingColumn = colOrder[dataTablesParameters.order[0].column];

    const sortingOrder = dataTablesParameters.order[0].dir;

     this.getPage().then(pageNumber => {

      this.getUserParams[0].dataTablesParameters = dataTablesParameters;

      this.getUserParams[0].pageNumber = pageNumber + 1;

      this.getUserParams[0].callback = callback;

      const requestObject = {

        OrgId: [Number(this.orgId)],

        PageLimit: dataTablesParameters.length,

        SearchTerm: this.searchTerm ? this.searchTerm : '',

        PageNumber: pageNumber +1,

        SortingColumn: [sortingColumn],

        SortingOrder: [sortingOrder]

      }

      this.orgDashboardService.getOrgIncidentsListPagination(

        dataTablesParameters, pageNumber + 1, callback,

        requestObject

      ).subscribe(resp => {

        this.IncidentsList = resp['Data']['Incidents'];

        this.checkVisibility(true);

      }, (error) => {

        this.loading = false;

        this.IncidentsList = [];

      });

    });

    this.checkVisibility(true);

  }

};

const that = this;

setTimeout(function () {

  that.dtTriggerInc.next();

}, 800);

this.getAssociatedIncidentTypes();

}

initializeNotificationStats(){

console.log('Hello');

this.initially = true;

this.colNotificationOrder = [

  'Description',

  'CreatedOn',

  'PortalNotificationType',

  'FileUrl',

  'Link',

  'NotifiedUsersCount',

  'NotificationStatus',

];

const $this = this;

this.dtOptionsNot = {

  stateSave: true,

  stateSaveCallback: function (settings, data) {

    localStorage.setItem(constants.DATA_TABLE_STATES.NOTIFICATIONS, JSON.stringify(data));

  },

  stateLoadCallback: function (settings) {

    return JSON.parse(localStorage.getItem(constants.DATA_TABLE_STATES.NOTIFICATIONS));

  },

  autoWidth: false,

  pagingType: 'full_numbers',

  language: {

    'emptyTable': 'No data available'

  },

  order: [1, 'desc'],

  columnDefs: [

    {

      targets: [7],

      orderable: false,

    },

    {

      targets: [1],

      type: 'date',

    },

  ],

  dom: 'Blfrtip',

  buttons: [

    {

      text: 'Export to CSV',

      class: 'dt-buttons.buttons-right',

      action: function(e, dt, node, config) {

        console.log('Exporting to CSV...');

        $this.exportNotData();

      }

    },

    {

      extend: 'colvis',

      text: '<i class="fa fa-list-alt" aria-hidden="true"></i>',

      className: "btn btn-outlined",

      align: 'button-right',

      columns: [1,3,4]

    },

  ],

  serverSide: true,

  ajax: (dataTablesParameters: any, callback) => {

    console.log('A');

    this.getNotPage().then((pageNumber) => {

      console.log(pageNumber);

      const searchTerm = dataTablesParameters.search.value;

      const sortingColumn = this.colNotificationOrder[dataTablesParameters.order[0].column];

      const sortingOrder = dataTablesParameters.order[0].dir;

      this.getNotParams[0].dataTablesParameters = dataTablesParameters;

      this.getNotParams[0].pageNumber = pageNumber + 1;

      this.getNotParams[0].callback = callback;

      const requestObject = {

        OrgId: [Number(this.orgId)],

        PageLimit: dataTablesParameters.length,

        SearchTerm: searchTerm ? searchTerm : '',

        PageNumber: pageNumber +1,

        SortingColumn: [sortingColumn],

        SortingOrder: [sortingOrder]

      }

      this.orgService

        .getNotificationList(

          dataTablesParameters, pageNumber + 1, callback,

        requestObject

        )

        .subscribe(

          (resp) => {

            this.notificationList = resp.Data.Notifications;

            console.log(this.notificationList);

            },

          () => {

            this.notificationList = [];

          },

        );

    });

  }

};

const that = this;

setTimeout(function () {

  that.dtTriggerNot.next();

}, 800);

}

getNotPage(){

return this.dtElementNot.dtInstance.then((dtInstance: DataTables.Api) => {

  return dtInstance.page();

});

}

getPage() {

return this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {

  return dtInstance.page();

});

}`

The getPage() function is returning correct page number and pagination is working fine for it. But in case of getNotPage() function, I am getting the same page number as in getPage() function. Thats why pagination is not working for it. I tried to add dtElements and declare it.

@ViewChildren(DataTableDirective) dtElements: QueryList;

I used this function to return the correct page number but its not working.

getPage() { this.dtElements.forEach((dtElement: DataTableDirective) => { dtElement.dtInstance.then((dtInstance: DataTables.Api) => { // Do your stuff }); }); }

[shanmukhateja]

Hi, I am sorry but v9 isn't supported anymore.

I will keep it open so others may help but I won't be able to assist with this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[shanmukhateja]

Closing the ticket as it's got no responses. Feel free to re-open.