Datatables: Introduction and setting

17 April 2020, 1:29 pm by antelove

Datatables: Introduction and setting
Datatables: Introduction and setting

What is datatables

DataTables 1 is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.


Step by step setting datatables:

In <head> tag, add jQuery core

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

and datatables core

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>


In <body> tag, add table

<table id="table" class="display">

    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 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>

and before </body> tag, add datatables script

<script>

    $(document).ready( function () {

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

    } );

</script>

Live Demo




No Action Title
1 table (codesandbox.io)
0 comment