How to handle DataTable specific events using jQuery DataTable plugin ?

Last Updated : 29 Jul, 2024

DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. DataTables is a simple-to-use plug-in with a variety of options for the developer's custom changes. The common features of the DataTable plugin are pagination, searching, sorting, and multiple column ordering.

In this article, we will learn to handle DataTable specific order and paging events. Datatables also gives back many custom events.

The pre-compiled files which are needed to implement the codes are

CSS:

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

JavaScript :

//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

Approach: To handle DataTable specific events dt namespace is used. All the events are triggered with the dt namespace. The datatable on() method is used which automatically appends dt namespace. Order event is automatically fired when the data in the table is ordered. Paging event is fired whenever pagination feature is used.

HTML table is designed with student's data with id, name , age, gender and marks as their fields. HTML div with id's orderResultID and pagingResultID is created to show a message whenever the order and paging events are fired.

Example: The following example code demonstrates how to handle functions whenever the DataTable specific events are fired. A simple message is shown below the table. The developer can write functions according to the application's need.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta content="initial-scale=1, 
        maximum-scale=1, user-scalable=0"
        name="viewport" />

    <meta name="viewport" content="width=device-width" />

    <!--Datatable plugin CSS file -->
    <link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />

    <!--jQuery library file -->
    <script type="text/javascript" 
        src="https://code.jquery.com/jquery-3.5.1.js">
    </script>

    <!--Datatable plugin JS library file -->
    <script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
    </script>
</head>

<body>
    <h2>Handling Datatable specific events</h2>

    <!--HTML tables with student data-->
    <table id="tableID" class="display" 
        style="width:100%">
        <thead>
            <tr>
                <th>StudentID</th>
                <th>StudentName</th>
                <th>Age</th>
                <th>Gender</th>
                <th>Marks Scored</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>ST1</td>
                <td>Prema</td>
                <td>35</td>
                <td>Female</td>
                <td>320</td>
            </tr>
            <tr>
                <td>ST2</td>
                <td>Wincy</td>
                <td>36</td>
                <td>Female</td>
                <td>170</td>
            </tr>
            <tr>
                <td>ST3</td>
                <td>Ashmita</td>

                <td>41</td>
                <td>Female</td>
                <td>860</td>
            </tr>
            <tr>
                <td>ST4</td>
                <td>Kelina</td>
                <td>32</td>
                <td>Female</td>
                <td>433</td>
            </tr>
            <tr>
                <td>ST5</td>
                <td>Satvik</td>
                <td>41</td>
                <td>male</td>
                <td>162</td>
            </tr>
            <tr>
                <td>ST6</td>
                <td>William</td>
                <td>37</td>
                <td>Female</td>
                <td>372</td>
            </tr>
            <tr>
                <td>ST7</td>
                <td>Chandan</td>
                <td>31</td>
                <td>male</td>
                <td>375</td>
            </tr>
            <tr>
                <td>ST8</td>
                <td>David</td>
                <td>45</td>
                <td>male</td>
                <td>327</td>
            </tr>
            <tr>
                <td>ST9</td>
                <td>Harry</td>
                <td>29</td>
                <td>male</td>
                <td>205</td>
            </tr>
            <tr>
                <td>ST10</td>
                <td>Frost</td>
                <td>29</td>
                <td>male</td>
                <td>300</td>
            </tr>
            <tr>
                <td>ST11</td>
                <td>Ginny</td>
                <td>31</td>
                <td>male</td>
                <td>560</td>
            </tr>
            <tr>
                <td>ST12</td>
                <td>Flod</td>
                <td>45</td>
                <td>Female</td>
                <td>342</td>
            </tr>
            <tr>
                <td>ST13</td>
                <td>Marshy</td>
                <td>23</td>
                <td>Female</td>
                <td>470</td>
            </tr>
            <tr>
                <td>ST13</td>
                <td>Kennedy</td>
                <td>43</td>
                <td>male</td>
                <td>313</td>
            </tr>
            <tr>
                <td>ST14</td>
                <td>Fiza</td>
                <td>31</td>
                <td>Female</td>
                <td>750</td>
            </tr>
            <tr>
                <td>ST15</td>
                <td>Silva</td>
                <td>34</td>
                <td>male</td>
                <td>985</td>
            </tr>
        </tbody>
    </table>
    <br />

    <div id="orderResultID"></div>
    <div id="pagingResultID"></div>

    <script>

            /* Initialization of datatables */
            $(document).ready(function () {

                /* events like order and paging are fired */
                    $('#tableID')
                        .on('order.dt', function () {
                            $("#orderResultID").show()
                            .html("<b>Order event fired!</b> ");
                        }
                        ).DataTable();

                $('#tableID').on('page.dt', function () {
                    $("#pagingResultID").show()
                    .html("<b>Paging event fired!</b> ");
                }
                ).DataTable();
            });
    </script>
</body>

</html>