title: dataTable using Ajax function with millions of data
body: <p>I have a search page with datatable with millions of rows of data fetched from the database. 
  I am stuck how to use the ajax data with deferRender and passing as datasets to the datatable.</p>
  
  <p>See my datatable code below, then i have three queries:</p>
  
  <p><strong>1. I would like to know how to pass the iterated and interval data to
     the datatable using callback???<br>
  2. How to pass the image column to
     pdf export? (the dataURL in the below code is not yeilding expected
     result)<br>
  3. And what all methods can be used to make the process faster?</strong></p>
  
  <p>Datatable code:</p>
  
  <pre><code>$('#resultTable').DataTable( {                      
                  destroy: true,  
                  "autoWidth": false,    
                  processing: true,
                  "serverSide": true,             
                  //"aaData": result,  // THIS IS WORKING FINE IF THE AJAX RESULT GIVEN DIRECTLY, BUT LOADING WILL TAKE MUCH TIME
                  ajax: {
                      type: 'POST',
                      url: 'search.php',
                      dataType: 'json',
                      data: { durationFrom: durationFrom, durationTo: durationTo, type: type, color: color, city: city, number: number },      
                      success:function(result){ 
                          data = result;
                          var out = [];
  
                          for ( var i=0; i&lt;data.length ; i++ ) {
                              out.push( [ data[i].id, data[i].eventtime, data[i].number, data[i].imageURL ] );
                          }
  
                          setTimeout( function () {
                              callback( {
                                  draw: data.draw,
                                  data: out,
                                  recordsTotal: data.length,
                                  recordsFiltered: data.length
                              } );
                          }, 50 );
                      }                       
                  },
                  "aoColumns": [
                      { "sTitle": "Id",
                      "mDataProp": "id",
                       "sWidth" : "50px" },                               
                      { "sTitle": "Date",
                      "mDataProp": "eventtime",
                       "sWidth" : "120px" },
                      {"sTitle": "Number",
                       "mDataProp": "number",
                       "sWidth" : "50px" },                  
                      {"sTitle": "Image",
                       "mDataProp": "imageURL",
                          "render": function(mDataProp, type, row) {
                              return '&lt;img src="'+mDataProp+' " alt="No image available" /&gt;';
                              },
                       "sWidth" : "50px"
                      }
                  ],
                  //deferRender:    true,
                  scrollY:        400,
                  "bSortClasses": false,
                  info: true,
                  language: {
                          "zeroRecords": "No matching records found - Please search with different search criteria",
                              "emptyTable": "No data available in table",
                          "infoEmpty": "No entries to show",
                              "info": "Records _START_ to _END_ of _MAX_",
                          "loadingRecords": "Loading...",
                          "Processing":  "&lt;img src='images/loader.gif' alt='Processing... Please wait...'&gt;",
                          "LoadingRecords": 'Loading...',
                          "search":         "Search:",
                          "paginate": {
                              "first":      "First",
                              "last":       "Last",
                              "next":       "Next",
                              "previous":   "Previous"
                          },
                      },
                  aaSorting : [[0, 'desc']],
                  "pagingType": "input",  
                  "pageLength": 100,
                  "lengthMenu": [[100, 500, 1000, 10000], [100, 500, 1000, 10000]],
                  dom: 'Blfrtip',
                  buttons: [
                      'copy',
                      {
                          extend: 'csv',
                          title: myFileName
                      },
                      {
                          extend: 'excelHtml5', 
                          title: myFileName
                      },
                       'print' , 
                      {
                          extend: 'pdfHtml5', 
                          title: myFileName  ,
                          exportOptions: {
                              columns: [0, 1, 2, 3, 4],
                              stripHtml: false
                          },
                          customize: function (doc) {
  
                              for (var i=1;i&lt;doc.content[1].table.body.length;i++) {
  
                                  var imageMarkUp = doc.content[1].table.body[i][4].text;
                                  var srcImg = $(imageMarkUp).attr('src');
  
  
                                  var img = new Image,
                                      canvas = document.createElement("canvas"),
                                      ctx = canvas.getContext("2d"),
                                      src = srcImg; 
  
                                  img.crossOrigin = "Anonymous";
  
                                  img.onload = function() {
                                      canvas.width = img.width;
                                      canvas.height = img.height;
                                      ctx.drawImage( img, 0, 0 );
                                      localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
                                  }
                                  var dataURL = canvas.toDataURL("image/png");                                            
  //NOT WORKING Correctly
  
                                  if (doc.content[1].table.body[i][4].text == img.src) {
                                      delete doc.content[1].table.body[i][4].text;
                                      doc.content[1].table.body[i][4].image = 'img';
                                  }
                              }
  
                              doc.content.splice(4, 0, {
                                  margin: [0, 0, 0, 12],
                                  alignment: 'center',
                                  image: dataURL
                              });
                          }
                      }
                  ]
              }); 
  </code></pre>