Load data from AJAX after table shows data from pagination button

zentx

Hi, I have a table that is loaded with data that comes from MySQL but in that data there's an ID to identify the name of a value in a object that comes from MongoDB, I have an AJAX method to call the name of those values from MongoDB (with the ID) and I have no problem loading the data in the table even I´m using the function"draw.pt" to recognize when I go to the next or previous page to load the exact data from the page, but the problem is that I need to redraw those values that comes from MongoDB in the table to be able to search them but if I try to use the "draw()" method I think the applications goes to a loop (for the same reason) and the data is never loaded so I don't know if there's another way to load this data.

Here's my code:

$('#campaignList').on('draw.dt', function() {
        getBranches();
    });

I have by default a spinner in the cell where the name of the value is going to be loaded:

function getBranches(){
    var csrftoken = $.cookie('csrftoken');
    var table = $("table#campaignList tbody");
    var datatable = $("#campaignList").DataTable();
    table.find('tr').each(function(i, el){
        
        var $tds = $(this).find('td');
        if( $tds.eq(4).find("i").hasClass( "fa fa-circle-o-notch fa-spin fa-lg fa-fw") ){
            branch_id = $tds.eq(11).text();
            $.ajax({
                url : "/establishment/branch_name/" + branch_id + "/",
                method : "GET",
                dataType: "json",
                error: function(){
                    
                },
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            }).done(function(response){
                var cell = datatable.cell($tds.eq(4));
                cell.data(response.branch_name).draw();
            });
        }
    
    });
    
}

kthorngren

I agree that calling draw() in the draw event is probably going to cause an infinite loop or other issues. This sounds like a good use of rowCallback since it looks like you are iterating the rows to get the ID then fetching from MongoDB data for that ID. However I'm not sure the best way to handle the async nature of ajax in rowCallback.

Or maybe you can use preDrawCallback to fetch the data and update the cells before the draw occurs eliminating the need for draw(). To gain a bit of efficiency I would look at packaging all the IDs and sending one ajax request then process the response for each row.

I would look at using the server script to fetch the MongoDB info and packaging one response to the Datatables ajax request. This way the MongoDB data is part of the MySql row data and no ajax fetches are needed when drawing the rows.

I haven't tried any of these solutions for the situation you have so they may or may not work. @allan or @colin may have better solutions for you.

Kevin

colin

Hi @zentx ,

I think you can just change this

                var cell = datatable.cell($tds.eq(4));
                cell.data(response.branch_name).draw();

to be this:

                var cell = datatable.cell($tds.eq(4));
                cell.data(response.branch_name).invalidate('data');

It shouldn't need the additional draw, see this example here.

Cheers,

Colin

colin

Just realised if you're ordering by that column, it will need a draw() - is that the case?

zentx

Sorry for not answering quickly (I was working on others bug from the same app and working in another project I have in hands)
I think the answer @colin gave me is the correct one I put the code he gave me and by far the table is showing the values when I search them without any problem, I'll be testing a few things and if there's no problem with the solution I'll put the question as answered in a hour.