How to re-add button selections when a DataTable toggles OFF/ON?

How to re-add button selections when a DataTable toggles OFF/ON?

bobc02bobc02 Posts: 19Questions: 6Answers: 0

I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. I have installed DataTables 1.10.18, and Select 1.2.6.

I have an invoice page with four DTs on it. To reduce the page complexity, I use toggles that provide expand/contract of page sections. Each section contains a different DT. The problem I'm running into is the loss of DT custom button selection when sections are toggled. If I remove the toggle logic, all works perfectly.

Here's a component.html snippet showing some toggle logic:

    <div class="row" style="margin-top: -15px;">
          <div class="col-sm-12 myAccount">                 
            <button (click)="toggleShowMakePaymentSubscription()" class="iconNestBtn" ngDefaultControl>
              <i *ngIf="showMakePaymentSubscription"  class="fa fa-minus-circle iconNestBtnPlus">
              <i *ngIf="!showMakePaymentSubscription" class="fa fa-plus-circle  iconNestBtnMinus">
            <span class="myTask">Pay for Subscription</span>
            <div *ngIf="showMakePaymentSubscription">
               <article class="col-sm-10">
                 <div sa-widget>
                     <header class="tblHeader_inside_clientform">
                         <span class="tblHeader">Subscription Invoices</span>

                     <div class="tblSrch_inside_clientform">
                         <div class="widget-body no-padding">
                                   data: subscriptionInvoices,
                                   columns: [
                                      {data: 'invoiceNO'},
                                      {data: 'invoiceDate'},
                                      {data: 'item'},
                                      {data: 'description'},
                                      {data: 'total'},
                                      {data: 'currency'},
                                      {data: 'dueDate'},
                                      {data: 'invoiceStatus'}
                                   buttons: [
                                       extend: 'selected',
                                       text: 'Pay'
                                     'copy', 'csv', 'pdf', 'print'
                                   columnDefs: [

I realize the toggle action causes the view to be re-created. But, shouldn't I be able to hook the button selection back up in the component.ts? I've tried several things, the most logical, to me, is to re-load the table, and add the table selections, in the toggle function. Here's what that looks like:

  public toggleShowMakePaymentSubscription() {
    console.log("AccountComponent toggleShowMakePaymentSubscription");
    this.showMakePaymentSubscription = !this.showMakePaymentSubscription;
    if(this.showMakePaymentSubscription) {
    } else {


  public loadTables() {
    console.log("AccountComponent loadTables - ENTRY");
    if($(this.dataTableComp)) {   
      if($(this.dataTableComp).DataTable) {
        console.log("AccountComponent loadTables - loading tables...");
        //table index num [0], [1]..., is based on the order that tables are defined in the component.html
        const paymentHistoryTbl        = $($(this.dataTableComp).DataTable.tables()[0]).DataTable();   
        const subscriptionInvoicesTbl  = $($(this.dataTableComp).DataTable.tables()[1]).DataTable();   
        const advertisementInvoicesTbl = $($(this.dataTableComp).DataTable.tables()[2]).DataTable();   
        const sellerFeeInvoicesTbl     = $($(this.dataTableComp).DataTable.tables()[3]).DataTable();   
  public addTableSelections() {
    console.log("AccountComponent addTableSelections - ENTRY");
    const tableRef = $(this.dataTableComp);
    if(!this.dataTableComp && tableRef) {
      if(tableRef.DataTable) {
        console.log("AccountComponent addTableSelections - adding table selections in accountService... ");
        this.accountService.setTableButtons($(tableRef.DataTable.tables()[1]).DataTable(), this, 1, 0, 'Pay');
        this.accountService.setTableButtons($(tableRef.DataTable.tables()[2]).DataTable(), this, 2, 0, 'Pay Ad');
        this.accountService.setTableButtons($(tableRef.DataTable.tables()[3]).DataTable(), this, 3, 0, 'Pay Fee');
    console.log("AccountComponent addTableSelections - EXIT");

Thanks for helping!


  • allanallan Posts: 51,923Questions: 1Answers: 7,873 Site admin

    I suspect it will be something to do with Angular and DataTables both trying to control the same DOM elements, but I'm not sure. Could you give us a link to a test page showing the issue please?


  • bobc02bobc02 Posts: 19Questions: 6Answers: 0

    Hi Allan, I sent the link and credentials in a PM a few days ago, in case you missed it.


  • allanallan Posts: 51,923Questions: 1Answers: 7,873 Site admin

    Thanks - I did see it yesterday and sent a reply then. In short I wonder if it is possible to use a non-minified version of the package files so I can debug it?


Sign In or Register to comment.