Difficulty
Today I’ll suggest you the perfect library for all your sites with a large amount of row datas to show.
After you’ll have imported the three files needed you can start.
Import these resources:
<!-- DataTables styles import -->
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<!-- jQuery import - add it only if you already haven't done it -->
<script type="text/javascript" language="javascript"
src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- DataTables js import -->
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
And you can simply start with one line of code:
$(document).ready( function () {
$('#myTable').DataTable();
} );
Make sure you have a well-formatted table to show your data. Here is a small example:
<table id="myTable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
For every need you can navigate the very accurate site documentation, with many examples:
https://datatables.net/examples/
Plus you can find many tips on the web to solve a wide range of problems you can encounter.
References:
https://datatables.net/
