Datatable flashing when clear draw and adding new rows

Datatable flashing when clear draw and adding new rows

greennngreennn Posts: 13Questions: 8Answers: 0
edited May 2020 in Free community support

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()
        }
    }

Answers

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

    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

This discussion has been closed.