CODEWITHSUNDEEP
javascriptjqueryhtmlperformancedatatables
Pavan G S
Pavan G S

Reputation: 101

How can I load the large amount of data to datatable without affecting performance

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++;
});

Upvotes: 1

Views: 5905

Answers (1)

DarknessZX
DarknessZX

Reputation: 686

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

Upvotes: 1

Related Questions