JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css "></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="loading">Loading Record</div>
<br>

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
</table>

JavaScript

var JSONData = [];

for (x=1; x<= 100; x++)
{
    JSONData.push({
        col1: "test1",
        col2: "test2",
        col3: "test3"
    });
}



 var oTable = $('#example').dataTable({
            "sPaginationType": "full_numbers",
            "iDisplayLength": 50,
            "aaData": JSONData,
            "bJQueryUI": true, 
            "fnCreatedRow": function (nRow, aData, iDataIndex) {
                
                var recLoaded = iDataIndex + 1;
                $("#loading").html("Loading Record " + recLoaded);

            },
            "fnDrawCallback": function () {
            },
       "aoColumns": [{"mData": "col1"}, {"mData": "col2"},{"mData": "col3"}]
        });