How to handle events using jQuery DataTables plugin?

Last Updated : 24 Jul, 2024

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

In this article, we will learn to handle jQuery events using the plugin.

The pre-compiled files which are needed to implement 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: We have an HTML table with student's data like ID, name, age, gender, and marks scored by each of them. Another "div" with id as resultID is taken to show the result for the event triggered by the user. The plugin's datatable is initialized with the table id in the JavaScript part of the code. The events are dealt by using jQuery's on() method. The DataTable plugin's row().data() method is used to get information about the selected row by the user.

Example: The following example demonstrates handling jQuery events using the DataTable plugin.

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 events in Datatable </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="resultID"></div>
      <script>
         <!--Initialization of datatables -->
          $(document).ready(function() {               
             
              var datatable = $('#tableID').DataTable();
               <!--On click of one row -->
               $('#tableID tbody').on('click', 'tr', function () 
               {
                  var data = datatable.row( this ).data();
                  <!--It displays the selected user information -->
                  $("#resultID").show().html("<b>User clicked on</b> "
                  +data[0]+' row '+
                  '<b> with Name:</b> '
                  +data[1]+ '<b> ,Age:</b> '+data[2]+'<b> ,Marks:</b> '
                  +data[4]);
             });
         });   
             
      </script>
   </body>
</html>