ajax refresh of tbody in table retains old values

kmcd95747

The below when run initial causes search to properly work,
When the ajax runs again to refresh table data, the search caches the original table data and does
not recognize the new data.

How to fix?

ajax here
then...
$("div.mytable").find("table tbody").html(ajaxreturn)
$("div.mytable").find("table".)DataTable()

I tried .clear() but then search does not return anything

kthorngren

Using html(ajaxreturn) updates the table in the DOM but Datatables knows nothing about the change. You can either uses clear() followed by rows.add() to update the Datatable. Or you can continue to use $("div.mytable").find("table tbody").html(ajaxreturn) followed by rows().invalidate() to have Datatabiels updates its data cache with the refreshed data.

Kevin

kmcd95747

See code below. The same result is occurring.
Am I properly applying the recommended .row().invalidate() functions?

First population:
$.ajax({data:{"reqtyp":"EPARRetrieveResearch",uid:uid,dayshist:dayshist},url: "server/file.asp",cache:false}).done(function(runner)
{
//WATCH 11132019

                    $("div.eparresearch").find("table tbody tr").each(function(){

                        $(this).remove()
                        $("div.eparresearch").find("table").DataTable()
                    })                  
                         $("div.eparresearch").find("table tbody").html(runner)

                    var dtbl = $("div.eparresearch").find("table").DataTable()



            })                  

Second population:

        $.ajax({data:{"reqtyp":"EPARRetrieveResearch",uid:uid,dayshist:dayshist,showby:showby},url: "server/fileasp",cache:false}).done(function(runner)
            {

                    $("div.eparresearch").find("table tbody tr").each(function(){

                        $(this).remove()

                    })

                    $("div.eparresearch").find("table tbody").html(runner)
                    var dtbl = $("div.eparresearch").find("table").DataTable()

                    dtbl.rows().invalidate()




            })              

kthorngren

Without having a test case to experiment with I'm not sure the best approach. You could try rows().invalidate() with the dom parameter, for example: dtbl.rows().invalidate('dom'). Or you could try destroy() then reinitialize Datatables, for example:

$.ajax({data:{"reqtyp":"EPARRetrieveResearch",uid:uid,dayshist:dayshist,showby:showby},url: "server/fileasp",cache:false}).done(function(runner)
    {
 
            $("div.eparresearch").find("table tbody tr").each(function(){
 
                $(this).remove()
 
            })
 
            $("div.eparresearch").find("table tbody").html(runner)
            var dtbl = $("div.eparresearch").find("table").DataTable()
 
            dtbl.rows().destroy()
            $("div.eparresearch").find("table").DataTable()

    })

Kevin

kmcd95747

Thank you for the help. This below worked with your suggestion of using .destroy()

            $.ajax({data:{"reqtyp":"EPARRetrieveResearch",uid:uid,dayshist:dayshist,showby:showby},url: "server/runner.asp",cache:false}).done(function(runner)
            {

                    $("div.eparresearch").find("table tbody tr").each(function(){

                        $(this).remove()

                    })



                    var dtbl = $("div.eparresearch").find("table").DataTable()
                    dtbl.rows().destroy()
                    $("div.eparresearch").find("table tbody").html(runner)
                    $("div.eparresearch").find("table").DataTable()



            })