ajax refresh of tbody in table retains old values

ajax refresh of tbody in table retains old values

kmcd95747kmcd95747 Posts: 3Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kmcd95747kmcd95747 Posts: 3Questions: 1Answers: 0

    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()
    
    
    
    
                })              
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kmcd95747kmcd95747 Posts: 3Questions: 1Answers: 0

    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()
    
    
    
                })  
    
This discussion has been closed.