Keep datatables from grabbing new ajax data on draw() after a clear()

ctam_guy

So im using datatables to create an admin panel for creating product pages. I have a product page table, and a product to category table that i filter on a selection made in the product page table:

productPageDatatable.on( 'select', function ( e, dt, type, indexes ) {
        if(indexes.length === 1)
        {
            var data = productPageDatatable.rows( indexes ).data().pluck('category_id')[0];
            
            productToCategoryDatatable.columns('category_id:name').search(data).draw();
        }
    });

And on deselect i clear the product to category table:

productPageDatatable.on( 'deselect', function ( e, dt, type, indexes ) {
        productToCategoryDatatable.clear().draw();
    });

I have the productToCategoryDatatable to deferLoading: 0 just so it doesn't grab all the records on first load. Any suggestion on how I could clear the datatable without having just grab all the data again? maybe i have to do DOM operations, or send a null back to my Ajax handler for the search?

Thanks in advance.

allan

I'm not quite clear on why it is getting all the data again. Are you using server-side processing perhaps?

Allan

ctam_guy

Hi allan! thank you for replying. Yes I am. I'm not sure how I could get the data again once the user clicks on another product page without using serverside, or would :

...search(data).draw();

do another ajax call to get the new products that are related to that page?

allan

The clear() method is not suitable for tables with server-side processing. It doesn't make an Ajax request itself, so the original data will still be at the data source.

do another ajax call to get the new products that are related to that page?

Correct. draw() will always make an Ajax request when using server-side processing.

Allan

ctam_guy

Hi allen, due to the amount of product records that will be tied to all the product pages, I did not want to load all the records to the page. As well i would have preferred no records being loaded onto the page on first load, until the user clicked on a page record, then clear the product records from the table entirely once the page record is deselected.

So I just decided to send a null search request to my Ajax Handler when a page record is deselected, then the ajax handler replies with an empty dataset for the products table.

Thank you for your help.

ctam_guy

Found a detailed explanation on what I wanted to achieve here https://github.com/DataTables/DataTables/issues/319

ctam_guy

if anybody is wondering a good workaround, instead of hammering the server for a blank request, i placed the processing on the client side, and just destroy and recreate the datatable:

// Destroy the product to category Datatable
productToCategoryDatatable.destroy();
// Empty the HTML DOM
$(productToCategoryTableDom).empty();
            
// Recreate the datatable
productToCategoryDatatable = $(productToCategoryTableDom).DataTable(<?php echo $productToCategorySettings->TableSettings ?>);

I encapsulate all my settings in php objects, if anyone is wondering.