How to add filter, search and pagination options to your table using javascript & datatable?

Having pagination, search and filter options to your data table is very much essential. which changes the complete view of your table presentation.

Here is the simplest way of adding these three options to your table.
Add this block of code in your head section.

<link rel="stylesheet" 
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" 
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
</script>
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>

Then add id and class to your table tag

<table id="example" class="display">
    <thead>
    <tr>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
    </tr>
    </tbody>
</table>
That's it your are done with the most usefull feature for tables.
Result:

Reference & For more vistit the link of official datable organization
https://datatables.net/examples/basic_init/zero_configuration.html