Unable to clear values of datatable and reinitalize the table in VF Salesforce

vvundavalli

Hi ,

We have a functionality in which the user sees a list of images as top level categories. And when the user clicks on a category he goes to a new page where he will see the detail of that row and when the user clicks on back, he needs to have the state saved.

Now when the user clicks on any other category then the table show be cleared and when the user clicks on any row its details opens and when he comes back the table properties should be retained.

the sequence is working fine, but on the first click the table is unable to clear the instance, it is storing the previous table search, sorting etc values and showing up when the user first clicks on the category.

Below is the code which gets called on document ready, so that when the user clicks on any category he has to see the new table so we want to have a clean table so we are calling the $('#searchResultsTable').DataTable().state.clear(); on click of any category and when the user comes back from the Detail we are appending a URL parameter source=fromAd and checking for not clearing the table.

But this is not working on the first time when the user clicks on the category.
Not understanding why. Can you please help team .

$(document).ready(function(){
console.log("DOM ready fired");

        var urlStr = window.location.href ;
        console.log('>>> urlStr : ' + urlStr);

        if(urlStr.indexOf('source=fromAd') > -1){
            console.log('>>> source is from Ad');
        }else{
            console.log(' in application ' );
            //$('#searchResultsTable').DataTable().state.clear();
            table = $('#searchResultsTable').DataTable();
            table.destroy();

        }

        $('#searchResultsTable').dataTable({

                "StateSave": true,
                'aoColumnDefs': [{
                    'bSortable': true,
                    'aTargets': [0] /* 1st one, start by the right */
                }],
                "order": [],
                "dom": '<"left"f><"right"l>rt<"bottom"><"left"p><"right"i><"clear">'
          });

    });