jQuery DataTable Example

by Pritom K Mondal

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example" data-order='[[1, "asc"]]'>
  <thead>
    <tr>
      <td data-sortable="false">Serial</td>
      <td>Name</td>
      <td>Roll</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='serial'></td>
      <td class='name'></td>
      <td class='roll'></td>
    </tr>
  </tbody>
</table>

JavaScript

var table = $("table"), td = table.find("tbody tr").clone(true);
table.find("tbody tr").remove();
for (var i = 1; i <= 100; i++) {
	td.find(".serial").html(i);
	td.find(".name").html("Name " + i);
	td.find(".roll").html("ROLL-" + i);
  td.clone(true).appendTo(table.find("tbody"));
}
$('table').dataTable();