Ajax Call not hiting on subsequent request

DSGYAMFI

I have a list of items with different categories set as data-attributes to be used to update the data in a datatable. However, after the first request, subsequent request does not go through.

Also, during search the data option in the ajax options does not update with the new category.

HTML LIST:

<ul id="list">
    <li>
        <a href="#" data-category="A">1201</a>
    </li>
    <li>
        <a href="#" data-category="C">1202</a>
    </li>
    <li>
        <a href="#" data-category="C">1203</a>
    </li>
    <li>
        <a href="#" data-category="B">1204</a>
    </li>
    <li>
        <a href="#" data-category="B">1205</a>
    </li>
    <li>
        <a href="#" data-category="A">1206</a>
    </li>
    <li>
        <a href="#" data-category="C">1207</a>
    </li>
</ul>

JAVASCRIPT:

$(document).on('click', '#list li a', function (e) {
    e.preventDefault();

    let category = $(this).data('category');
    
    $('#category-list').DataTable({
        scrollY: 300,
        retrieve: true, // destroy: true - both not working
        serverSide: true,
        ajax: {
            url: Settings.baseUrl + '/action/search/category',
            method: 'POST',
            cache: false,
            data: function ( data ) {
                delete data.columns;
                data.category = category;
            }          
        },
        language: {
            search: '',
            searchPlaceholder: 'Search Category...'
        },
        columns: [
            { data: "cat_id" },
            { data: "cat_type" },
            { 
                data: "cat_code",
                searchable: false,
                orderable: false,
                createdCell: function( cell, cellData, rowData, rowIndex, colIndex ) {
                    $(cell).addClass('d-none');
                }
            },
            {
                data: "sub_code",
                searchable: false,
                orderable: false,
                createdCell: function( cell, cellData, rowData, rowIndex, colIndex ) {
                    $(cell).addClass('d-none');
                }
            },
            { data: "cat_name" },
            { data: "cat_alias" }
        ]
    }); 
});

OUTPUT

It is expected that on every click of a list item the server-side request should be made and the table updated with new records. However, after the first item is clicked, subsequent clicks do not initiate the ajax call, and the category option is not updated even during searching.

Any assistance would be very much appreciated.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Use ajax.data as a function to dynamically change the parameter values. Otherwise they will be set once on initialization. There is an example in the docs and a running example.

I believe using retrieve only gets the API instance and doesn't perform any of the initialization options. So that is why the ajax request isn't sent. Unless you are changing the table structure you probably don't want to use destroy.

Instead use the DataTable.isDataTable() API to see if the table has been initialized. If not initialize it. If it has been then just use ajax.reload() to fetch the data via ajax.

Kevin

DSGYAMFI

Thank you for your quick response Kevin.
However in my code I used the ajax.data as a function in my initialization option. it didn't work or updated the data.category option set.

I also tried to use the ajax.reload() function in an if else statement like this:

if($.fn.DataTable.isDataTable('#category-list')) {
      $('#category-list').DataTable().ajax.reload();
 } else {
   // initialization block
}

but the data.category option is still not updated in the request.

kthorngren

Yes, I see that now. I would start by debugging a couple spots. First is let category = $(this).data('category'); to make sure it has the expected value. Then do the same in your ajax.data function. If that looks correct then use the browser's network inspector to see what parameters are being sent to the server. Let us know where you find the failure.

Otherwise we will need a link to a test case showing the issue to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You can use one of the server side processing templates [here])(https://datatables.net/manual/tech-notes/9) with your above code. We only care about the client side if thats where you find the problem.

Kevin

DSGYAMFI

Thanks very much Kevin. you saved my day.

it worked after moving the line let category = $(this).data('category'); into my ajax.data function.

so I even discarded the ajax.reload() function in the if clause to check and reload if it is already initialized.