Datatables

Basic Initialization

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

1. Required Vendor Files

                
                    <script src="datatables.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="datatables.min.css">

2. Required Template Specific Files

                
                    <script src="dataTables.bootstrap4.min.js"></script>

Note! Add datatable extensions css / js files as per requirements.

3. 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>

4. Initialization

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

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

Type	URL
Plugin Link	https://datatables.net/
Template Page	https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/table-datatable.html