Use fnDrawCallback with ajax to update data in table, search not working

MinaChen

I use fnDrawCallback to present a column with ajax data.
But in this column search is not working. (In other column which data from php is workable).
I also create the column by php first with null data.

(This is my script)

$('#example').DataTable({
       "order": [[ 0, "desc" ]],
       // detect page changed
        "fnDrawCallback": function( oSettings ) {
           for(var $i=0;$i<obj.length;$i++){
              ajax_to_find_outline(obj[$i]);
           }
          }
});

This is my function to get data by ajax.

function ajax_to_find_outline($order_id){
        $.ajax({
            url: '<?php echo base_url(); ?>index.php/ajax-find-outline', 
            type: 'POST',
            data: { 
                order_id: $order_id
            },
            error: function(jqXHR,status, errorThrown){
                console.log(errorThrown);
                console.log(jqXHR.responseText);
                console.log(jqXHR.status);
            },
            success: function(data) {
                var td = document.getElementById("td-"+$order_id); // return from ajax
                if(td==null){  // the order_id data not on this page
                    // do nothing
                } else {
                    td.innerHTML = data;
                }
            }
        });
}

colin

Hi @MinaChen ,

It's because you're changing the table data under the feet of DataTables - it has no idea the data has changed when you modify it with td.innerHTML. If you use cell().data(), then DataTables will be aware of the change. Alternatively, you can invalidate the cell data with cell().data() which would force the cache to be rescanned.

Cheers,

Colin