dataTable serverside example
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th>Jean1</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean2</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean3</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean4</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean5</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean6</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean7</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean8</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean9</th>
<th>Dit</th>
<th>Ingénieur</th>
<th>Longueuil</th>
<th>1th Mar 14</th>
<th>$125, 000</th>
</tr>
<tr>
<th>Jean10</th>
<th>Dit</th>
<th>Ingénieur</th>
...
JavaScript
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/bXZCNjxHCa?indent=4';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
"deferLoading": 50,
'ajax': {
'url': url
}
});
//
//
});