title: Datatables: dynamic columns and huge amount of data
body: <p>I'm using <a href="https://datatables.net/" rel="nofollow noreferrer">datatables</a> with ajax data request (json format) and dynamic columns load. This is my actual code:</p>
  
  <pre><code>var tableData;
  var tableName='#iuprTable';
  
  $(document).ready(function (){
  
      jQuery.ajax({
          type : "GET",
          url : "table/"+document.getElementById("hiddenIdCar").value,
          headers: {'Content-Type': 'application/json'},  
          beforeSend: function() {
              waitingModal.showPleaseWait();
          },
          success: function(data,status,xhr){
              //No exception occurred
              if(data.success){
                  tableData = data.result;
                  $.each(tableData.columns, function (k, colObj) {
                      var str = '&lt;th data-html="true" data-toggle="tooltip" title="&lt;b&gt;NAME&lt;/b&gt;:'+ colObj.parName + '&lt;br&gt;&lt;b&gt;DESCRIPTION&lt;/b&gt;:' + colObj.description + '&lt;br&gt;&lt;b&gt;NOTE&lt;/b&gt;: ' + colObj.note + '"&gt;&lt;/i&gt;' + colObj.parName + '&lt;/th&gt;';
                      $(str).appendTo(tableName+'&gt;thead&gt;tr');
                  });
              } else {
                  waitingModal.hidePleaseWait();
                  notifyMessage(data.result, 'error');
              }
          },
          error: function(xhr,status,e){
              window.location.href = "/500";
          }
      }).complete(function() {
          //initialize datatable
          if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
              var iuprTable = $(tableName).DataTable({
                  scrollCollapse: true,
                  scrollX:        true,
                  scrollY:        '60vh',
                  paging:         false,
                  "data": tableData.data,
                  "columns": tableData.columns,
                  fixedColumns:   {
                      leftColumns: 4
                  },
                  "initComplete": function(settings){
                      //TOOLTIP cell
                      $(tableName+ ' tbody td').each( function (k, cellObj){
                          this.setAttribute( 'title', cellObj.innerText );
                          this.setAttribute( 'data-toggle', "tooltip" );
                      });
                      $('[data-toggle="tooltip"]').tooltip({
                          container: 'body'
                      }); 
                      //add timeout because otherwise user could see a too fast waiting modal
                      setTimeout(function(){
                          waitingModal.hidePleaseWait();
                      }, 1000);       
                  } 
              });
          }
          else {
              iuprTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
          }
      }); 
  });
  
  function notifyMessage(textMessage, typeMessage){
      $.bootstrapGrowl(textMessage, {
          type: typeMessage, // (null, 'info', 'error', 'success')
      });
  }
  </code></pre>
  
  <p>Since I may have 300 rows and 300 columns, with this numbers the page becomes slow. I read about server side processing and I was wondering how can I increase performace.
  I have found 2 solutions:</p>
  
  <p>1)Server side processing: ask to server only the showed rows</p>
  
  <p>2)Client side: the json returns all the rows but only some of them are showed in a specific time, when user scrolls the data are updated (the page is faster after an initial loading).</p>
  
  <p>The first solution is most complicated than client side processing because I should change web services. Do you have an advice for me? How can I implement these solutions? Thanks</p>