Datatable flashing when clear draw and adding new rows

greennn

I have a datatable that I redraw quite frequently my making an ajax request to the server and getting new data every 5 seconds. Once I get the data I send the data to this function which redraws my table. The problem is that every 5 seconds I can see that the datatables flashes and it looks like the page is boucning. I understand this is a result of clear and redraw but I could not find any method that checks for previous data and only redraws if necessary. I do not think defer rendering will solve this flashing issue because the only thing defer rendering does is draw one page at a time.

How would I redraw the datatable more smoothly?

  function tblAllUsersEntryTable(data){
        tblAllUsersEntry.clear().draw()


        for(let item of data){

            tblAllUsersEntry.row.add($(`
            <tr> 
            <td >${item.studentNumber}</td> 
            <td>${item.LocationName}</td>
            </tr>`)).draw()
        }
    }

kthorngren

Using draw() for each row is not needed and one reason why drawing the table is slow. Use draw() after your for loop, like this:

      for(let item of data){
 
          tblAllUsersEntry.row.add($(`
          <tr>
          <td >${item.studentNumber}</td>
          <td>${item.LocationName}</td>
          </tr>`)).draw()
      }
      tblAllUsersEntry.draw();

This way Datatables only draws the table once instead of for each row.

Not sure if you would gain efficiency by replacing your for loop with rows.add(), for example: tblAllUsersEntry.rows.add( data ).draw(). But I suspect that might require some config changes to your Datatables init code. If you still need help please post you init code and an example of your data structure.

Kevin