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.cssJavaScript CDN Link: //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.jsApproach: 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: Comment More infoAdvertise with us Next Article How to use API inside callbacks using jQuery DataTables plugin ? G geetanjali16 Follow Improve Article Tags : JavaScript Web Technologies HTML HTML-Tags jQuery-Plugin +1 More Similar Reads How to load data from JavaScript array using jQuery DataTables plugin ? DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple-to-use plug-in with a huge range of options for the developer's custom changes. The common features of the DataTable plugin are paging, multiple column ordering, sorting 2 min read How to display child row information using jQuery DataTables plugin ? DataTables are modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. DataTable is a simple-to-use jQuery plug-in with many options for developer's custom changes. Some features of DataTables are pagination, searching, sorting and multiple column ordering.I 4 min read How to handle events using jQuery DataTables plugin? 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 mult 3 min read How to initialize multiple tables using jQuery DataTables plugin ? DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. It is a very simple-to-use plug-in with a variety of options for the developer's custom changes as per the application need. The plugin's features include pagination, sorting, searching 3 min read How to Select all Checkboxes in all Pages in jQuery DataTable ? Selecting all the table entries together at the same time in the jQuery data table can be achieved using the below methods. Before directly going to the implementation, first include the below CDN Links to your HTML document to implement the data table.Using the fnGetNodes() method of dataTableIn th 5 min read How to handle DataTable specific events using jQuery DataTable plugin ? 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 m 3 min read How to check lock-state of a callback list using jQuery ? In jQuery, a callback list is an object that stores a list of functions to be executed when a specific event occurs. These functions are called "callbacks". Callbacks are often used in jQuery to perform certain actions after an event has occurred. However, sometimes it may be necessary to check the 3 min read How to handle multiple rows selection using jQuery DataTables plugin ? Datatables is a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple and easy to use with a many options available for developer's custom changes. The other common features are pagination, searching, sorting and multiple column ordering.In 2 min read Handling nested data objects using jQuery DataTables plugin DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpage. It is a simple-to-use plug-in with many options for the developer's custom changes. The common features of DataTables are sorting, ordering, searching, and pagination.DataTables can eas 3 min read How to implement column specific search filter using DataTables plugin ? DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application's need. The plugin’s features include pagination, sorting, searching 4 min read Like