Data Tables

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 path-to-apex-page/dt-basic-initialization.html