title: How to load huge data in datatables with jquery ajax from node js as back-end?
body: <p>I am trying to load around 10,000 records(rows) into DataTable with jquery ajax. So, what are all the syntax i need to write inside datatable? What is the format that should be returned so as to implement the pagination with ajax in datatable ?</p>
  
  <p>i am now adding rows into datatable via the syntax <code>table.row.add([&lt;parameter1&gt;,&lt;parameter2&gt;...]);</code> via for() loop, so when huge data is getting loaded, the table data appears only after all the rows are getting added, until that whole page gets hanged since its loading huge number of rows. The Data is loaded from MySql stored procedures.</p>
  
  <p>Datatable:</p>
  
  <pre><code>var listProductsTable = $(".listProductsTable").DataTable({
      "pagingType": "full",
      "columnDefs":[
          {
              "targets":9,
              "render": function() {
                  return '&lt;i class="fa fa-pencil-square-o" style="font-size:30px;" id="edit_product" data-toggle="modal" data-target="#editProductModal"&gt;&lt;/i&gt;';
              }
          },
          {
              "targets":10,
               "render": function(data,type,row) {
                  //console.log(data,type,row);
                  return '&lt;input type="checkbox" id="disable_product" val="" class="js-switch"&gt;';
               }
          },
          { "width": "10%", "targets": "_all"  },
          {
               "orderable": false,
               "targets": 0,
          }
      ],
      "order": [[ 1, 'asc' ]],
      "dom": '&lt;"top"&gt;rt&lt;"bottom"p&gt;&lt;"clear"&gt;',
      "createdRow": function (row, data, index) {
          var switchElem = Array.prototype.slice.call($(row).find('.js-switch'));
          switchElem.forEach(function (html) {
              var switchery = new Switchery(html, { color: '#66FE43', secondaryColor: '#dee2e6' });
          });
      }
  });
  
      /* numbering */
      listProductsTable.on( 'order.dt search.dt', function () {
          listProductsTable.column(0, {/*search:'applied',*/ order:'applied'}).nodes().each( function (cell, i) {
              cell.innerHTML = i+1;
          });
      }).draw();
  </code></pre>
  
  <p>AJAX:</p>
  
  <pre><code>$.ajax({
      url: serverurl + "getdata",
      type: 'POST',
      contentType: 'application/json',
      cache: false,
      data:JSON.stringify(productsData),
      success:function(productsdata)
      {
          for (var i = 0; i &lt; productsdata.Response.length; i++) {
              listProductsTable.row.add([id,code,category,....]).draw(false);
          }
      }
  );
  </code></pre>