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

bobc02

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;">
       <sa-widgets-grid>                    
          <div class="col-sm-12 myAccount">                 
            <button (click)="toggleShowMakePaymentSubscription()" class="iconNestBtn" ngDefaultControl>
              <i *ngIf="showMakePaymentSubscription"  class="fa fa-minus-circle iconNestBtnPlus">
              </i>
              <i *ngIf="!showMakePaymentSubscription" class="fa fa-plus-circle  iconNestBtnMinus">
              </i>
            </button>
            <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>
                     </header>

                     <div class="tblSrch_inside_clientform">
                         <div class="widget-body no-padding">
                             <sa-datatable
                                 [options]="{
                                   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) {
      this.loadTables();
      this.addTableSelections();
    } else {
      this.destroyTables();
    }

  }

  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();   
        
        paymentHistoryTbl.clear();
        paymentHistoryTbl.rows.add(this.paymentHistory).draw();
        
        advertisementInvoicesTbl.clear();
        advertisementInvoicesTbl.rows.add(this.advertisementInvoices).draw();
        
        sellerFeeInvoicesTbl.clear();
        sellerFeeInvoicesTbl.rows.add(this.sellerFeeInvoices).draw();
        
        subscriptionInvoicesTbl.clear();
        subscriptionInvoicesTbl.rows.add(this.subscriptionInvoices).draw();
      }
    }
  } 
   
  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!
Bob

allan

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?

Allan

bobc02

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

Thanks,
Bob

allan

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?

Thanks,
Allan