DataTables is very simple to use as a jQuery plug-in with a huge range of customizable options.

1. Required Vendor Files

<link rel="stylesheet" href="dataTables.bootstrap4.min.css">
<script src="jquery.dataTables.min.js"></script>
<script src="dataTables.bootstrap4.min.js"></script>

2. HTML table structure

<table class="table" id="userDatatable">
    <thead>
        <tr>
            <th>head 1</th>
            <th>head 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row 1 data 1</td>
            <td>row 1 data 2</td>
        </tr>
        <tr>
            <td>row 2 data 1</td>
            <td>row 2 data 2</td>
        </tr>
    </tbody>
</table>

3. Initialization

$("#userDatatable").DataTable();

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Plugin Link	https://datatables.net/
Template Page	https://demos.pixinvent.com/apex-html-admin-template/demo-1/dt-basic-initialization.html