Open In App

How to use API inside callbacks using jQuery DataTables plugin ?

Last Updated : 06 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

In this article, we will learn to use API inside callbacks. A very simple example is shown, the developers can add on functionalities as per the application's need.

The pre-compiled files which are needed to implement are:

  • CSS CDN Link:
    https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
  • JavaScript CDN Link: 
    //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

Approach: All the above files are included for further implementation which is used for handling datatables. A simple student table is used with their details like student id, name, age, gender, and marks scored. The table is initialized using the jQuery DataTable plugin in the JavaScript part of the code. On click event, it gets the cell nodes and draws the result. The plugin's $().API method is used to get all cell nodes in the table's body and then the relevant action is taken on them. A filter is applied to the table with the value inside the cell.

Example: The following example shows the use of the API inside the click event callbacks. The Initcomplete ( initialization complete callback) is useful to know when the student table is initialized, fully loaded, and drawn. It's useful to know for configuring components connected to table.

HTML 
<!DOCTYPE html>
<html>
  <head>
    <!--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>Using API in callbacks</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>

    <script>
      <!--Initialization of datatables -->

      $(document).ready(function () {
        $("#tableID").DataTable({
          initComplete: function () {
              
            // Getting API instance
            var api = this.api();
            
            // On click event, get cell nodes
            api.$("td").click(function () {
              api.search(this.innerHTML).draw();
            });
          },
        });
      });
    </script>
  </body>
</html>

Output:


Next Article
How to use API inside callbacks using jQuery DataTables plugin ?

G
geetanjali16
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox