// noprotect

var numCols = 50;

var numRows = 10000;

var events = $('#events');

events.append('<div>Initializing HTML table with ' + numCols + ' columns and ' + numRows + ' rows, please wait.</div>');

​

setTimeout(function() {

  var startTime = Date.now();

  var data = [];

  var columns = [];

​

  var table = document.createElement("TABLE");  //makes a table element for the page

​

  for(var j = 0; j < numRows; j++) {

    var row = [];

    for(var i = 0; i < numCols; i++) {

       row.push(j + '-' + i); 

    }

    data.push(row);

  }

  for(var i = 0; i < numCols; i++) {

    columns.push({title: i.toString()});

  }

​

  events.append('<div>Data built in ' + (Date.now() - startTime) + ' milliseconds.</div>');

​

  document.body.append(table);

  startTime = Date.now();

​

  $(table).DataTable({

    data: data,

    deferRender: true,

    initComplete: function() {

      events.append('<div>DT with array data ' + (Date.now() - startTime) + ' milliseconds.</div>');

    },

    columns: columns

  });

}, 100);