如何在不影响性能的情况下将大量数据加载到数据表

Question

this script is working fine when i am loading less data(300 rows). But when i try to load more data(3000 rows) it's taking more time and browser showing some script slow down error. Please help me out to resolve this issue

HTML Table as shown below

<table class="table table-bordered" id="db_new_table">
     <thead>
        <tr>
          <th> Key </th>
           <th> Value </th>
        </tr>
     </thead>
     <tbody>
         //to here loading data from js     
     </tbody>
</table>

My JS Script Looks like below

//Intializing database
    var table_new = $('#db_new_table').DataTable({            
      "bSortClasses": false,           
      "lengthMenu": [ 500, 1000, 1500, 2000 ],
      "pageLength": 500,
      "deferLoading": coutnt,            
    });


//Loading data to datatable   
var j=1;        
$.each((this.data), function(i, key){  
  var tr = '<tr class="table_row" data-id='+j+'> <td>'+ i +'</td> <td>'+ key +'</td> </tr>'; 

  table_new.rows.add($(tr)).draw();            
  j++;
});

Answer 1

3000 rows is quite a lot of DOM elements for browser to process. You can try using virtual scroll to prevent browser slowing or crash. Virtual scroll will only render DOM element which you see in your screen and replace data when you scroll, not add more DOM element.

You can try this library for virtual scroll https://clusterize.js.org/

In case your request take too much time, you may got timeout problem. In that case you can consider use paging or endless scroll