Binding DataTables to a variable for multiple tables in same page.

bbrindza

I am able to create multiple tables from the same script on the same page using dynamically create unique IDs for each table loaded.

I also need to bind these unique table ID to a variable for use in table column filters and columns().iterator.

This is where I would need a unique variable in place of my 'table' variable

     // Apply column filter
     $('#' + tableID + 'thead input').on( 'keyup change', function () {
         table
             .column( $(this).parent().index()+':visible' )
             .search( this.value )
             .draw();
     } );

    table.columns().iterator( 'column', function (ctx, idx) {
            $( table.column(idx).header() ).append('<span class="sort-icon"/>');
    } );

Full DataTable script

$(document).ready(function() {

     var viewType = '<?php echo $_GET['viewType'] ?>';
     var tableID = '<?php echo $_GET['tableID'] ?>'; // Get passed in from HomePage (ie. FCLookupTable_0, FCLookupTable_1, FCLookupTable_1 etc.)

     var element = document.getElementById("FCLookupTable");  // Reset <table> id with tableID variable  
     element.id = tableID;
     
     if(viewType == 'live'){ 
            var ssp = "FreightClaims/ssp_FreightClaimManagement.php";
     }else{
            var ssp = "FreightClaims/ssp_FreightClaimArchive.php";
            document.getElementById('createFreightClaim').style.display = 'none';   
     };
     
     // Setup - add a text input to each header cell
     $('#' + tableID + ' thead tr#filterrow th:gt(0)').each( function () {
       $(this).html( '<input type="text" size="1" onclick="stopPropagation(event);" placeholder="Search" />' );
     });
     
    //Apply column filter
     $('#' + tableID + 'thead input').on( 'keyup change', function () {
         table
             .column( $(this).parent().index()+':visible' )
             .search( this.value )
             .draw();
     } );
     
    var table = $( '#' + tableID).DataTable( {
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], 
        order: [[ 1, "desc" ]],
        pageLength: 15,
        dom: 'RlBfrtip',
        buttons: [
                   'excelHtml5',
               ],
        pagingType: "full_numbers",
        language: {search: "Table Search: "},
        processing: true,
        serverSide: true,
        ajax: ssp,
        language: {
                    processing:  
                     //    '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i><span>  Loading Data...</span>' 
                     //  '<i class="fa fa-circle-notch fa-spin fa-2x fa-fw"></i><span>  Loading Data...</span>' 
                      '<i class="fa fa-sync fa-spin fa-2x fa-fw"></i><span>  Loading Data...</span>' 
                     //  '<i class="fa fa-cog fa-spin fa-2x fa-fw"></i><span>  Loading Data...</span>' 
                    // '<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i><span>  Loading Data...</span>' 
                 } ,
        columns: [
                  { className:'detail-level-control',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                    width: '1px'
                   },
                  { data: "claim_number_link"},
                  { data: "location" },
                  { data: "department_name" },
                  { data: "vendor_customer" },
                  { data: "pro_number" },  
                  { data: "carrier_name"},
                  { data: "claim_amount" },
                  { data: "freight_claim_amount" },   
                  { data: "total_claim_amount"},
                  { data: "amount_paid" },
                  { data: "amount_due" },
                  { data: "status" },
                  { data: "ship_date"  },
                  { data: "received_date" },
                  { data: "claim_type" },
                  { data: "created_age" },
                  { data: "filed_age" }
                 ],
         select: {
                   style:    'os',
                   selector: 'td:first-child'
                  },
         colReorder: true,
    //   scrollX: true,
         orderCellsTop: true,
    });//END .dataTable    

    table.columns().iterator( 'column', function (ctx, idx) {
            $( table.column(idx).header() ).append('<span class="sort-icon"/>');
    } );

    //******************************************************
    //Event listener for opening and closing detail level 1
     $('#' + tableID + ' tbody').on('click', 'td.detail-level-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row and call getChildDetail function
            row.child( getChildDetail (row.data()) );
            row.child( formatChildDetail() ).show();
            tr.addClass('shown');
        }
    } );
     $('div.dataTables_filter input').focus();    
} );//END $(document).ready(function() 

colin

Probably easiest way would be to just add all those tableIds to an array, and reference them through that. It sounds very specific to your design, so hope that helps,

Colin

bbrindza

I am not sure I completely understand the concept .

I need to have a unique JS variable for each unique table ID so when I bind the DataTable to the variable I can reference the table using the unique JS variable.

I'm not sure how an array would help.

Are there other methods I can use for apply a column filter to a table without a JS variable?

kthorngren

Maybe something like this will work:

var myTable =  $('#' + tableID).DataTable(); // Get an instance of the Datatable API
// Apply column filter
 $('#' + tableID + 'thead input').on( 'keyup change', function () {
     myTable
         .column( $(this).parent().index()+':visible' )
         .search( this.value )
         .draw();
 } );
 
myTable.columns().iterator( 'column', function (ctx, idx) {
        $( myTable.column(idx).header() ).append('<span class="sort-icon"/>');
} );

I called the variable myTable but you can use whatever you like. The variable just contains a reference to the Datatable API and can change without affecting anything.

Kevin

bbrindza

Kevin,
I am currently using a variable named “table”. This is the variable I use in the column filter to identify what unique table ID to reference. Correct me if I am wrong, but shouldn’t this variable name be unique as well?

colin

I'm not quite following. The variable only needs to be unique when you're using. If Kevin's code is setting up the headers, you could loop through each table, with the same variables, as you don't need to reference them once the initialisation is complete.

If we're still talking on different pages here, it would make sense to create a test case so we can see the issue you want help with. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

bbrindza

Colin ,
Perhaps I am chasing a ghost because my column filter is not working

I assumed that it was because I am using the same variable name for the multiple DataTables an the same page. However you are suggesting that this is not the case.

Let me look into this code further to see what is preventing the column filter not to work.

bbrindza

Follow up. I found the issue.

Because I am using a dynamically generated variable for the table ID, I did not have a space in my column filter constructer table identifier.

Hopefully this may help others. Thank you again, for all your help.