JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/css/jquery.dataTables.css">
<input type=button value='Populate' id=btn>
<table id=myTable>
    <thead><tr><th>Column 0</th><th>Column 1</th><th>Column 2</th>
        <th>Column 3</th></tr></thead>
    <tbody>
    </tbody>
</table>

JavaScript

function populate()
{
console.time('populate');
    var t = $('#myTable').dataTable();

    for (var irow = 0; irow < 4000; irow++)
    {
        var cells = new Array();
    	var r = jQuery('<tr id=' + irow + '>');
        for (var icol = 0; icol < 4; icol ++)
            cells[icol] = 'Row ' + irow + '; col ' + icol;
    	var ai = t.fnAddData(cells,false);
    }
    t.fnDraw();
console.timeEnd('populate');  
}

$('#btn').click(function(){populate();});

console.time('render');
jQuery('#myTable').dataTable(
    {
        'bDestroy': true,
        "bInfo": true,
        "bProcessing": true,
        "bDeferRender": true,
        'iDisplayLength': 10,
        'sPaginationType': 'full_numbers',
        'sDom': '<"top"i> T<"clear">lfrtip',
        'sPageButtonActive': "paginate_active",
        'sPageButtonStaticDisabled': "paginate_button",
        "oLanguage": {
            "sSearch": "Futher Filter Search results:",
            "sInfo": "Got a total of _TOTAL_ results to show (_START_ to _END_)",
            "sLengthMenu": 'Show <select>' +
    '<option value="5">5</option>' +
    '<option value="10">10</option>' +
    '<option value="15">15</option>' +
    '<option value="20">20</option>' +
    '<option value="25">25</option>' +
    '</select> results'
        },
        "bSort": false
    }
    );
console.timeEnd('render');