Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use API inside callbacks using jQuery DataTables plugin ?
In jQuery, the DataTables plugin allows us to add some extra features to the HTML table. When you create a table using the raw HTML, it looks unformatted. So, we need to style it using CSS. Also, we need to add some functionalities to the table, like pagination, searching into the table, and sorting in ascending and descending order according to a particular column's data. So, this all can take lots of effort from one developer.
What if I say we add all functionalities using the DataTables plugin? Yes, you heard right. Here, we will look at the different examples of using the DataTables plugin API.
Syntax
Users can follow the syntax below to use the DataTable plugin API with any HTML table.
$("table_selector").DataTable({
});
In the above syntax, ‘table_selector’ is a CSS selector used to access the table using jQuery.
Example 1
In the example below, we have added the CDN link of JQUery’s DataTable plugin in the <head> tag. After that, we created the table representing the home data and added 4 columns. Also, we have added some data for homes. In Jquery, we accessed the table and invoked the DataTable() method.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
</head>
<body>
<h3> Using the <i> Data table plugin API </i> to add extra features in the table </h3>
<div>
<table id = "home_table">
<thead>
<tr>
<th> House Id </th>
<th> Total Rooms </th>
<th> Colour </th>
<th> City </th>
</tr>
</thead>
<tr>
<td> 1 </td>
<td> 3 </td>
<td> Red </td>
<td> London </td>
</tr>
<tr>
<td> 2 </td>
<td> 4 </td>
<td> Blue </td>
<td> Manchester </td>
</tr>
<tr>
<td> 3 </td>
<td> 5 </td>
<td> Green </td>
<td> Leeds </td>
</tr>
<tr>
<td> 4 </td>
<td> 6 </td>
<td> Yellow </td>
<td> Sheffield </td>
</tr>
<tr>
<td> 5 </td>
<td> 7 </td>
<td> Orange </td>
<td> Bradford </td>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
$("#home_table").DataTable({
});
});
</script>
</body>
</html>
In the output, users can observe that CSS and proper styling are added to the table. Also, users can search in the table.
In the example below, we created the country data table. We have added 5 different columns representing the country data like country name, population, GDP, etc.
In Jquery, we have used the DataTables plugin, and we h In the object, we have defined some properties to apply on the table. For example, the ‘responsive’ property is added to make the table responsive. The ‘ordering’ property is added to allow users to sort the table in ascending or descending orders.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
</head>
<body>
<h3> Using the Data table plugin API to add extra features in the table </h2>
<table id = "countries">
<thead>
<tr>
<th> Country </th>
<th> Capital </th>
<th> Continent </th>
<th> Population </th>
<th> GDP </th>
</tr>
</thead>
<tr>
<td> India </td>
<td> New Delhi </td>
<td> Asia </td>
<td> 1,300,000,000 </td>
<td> 2,000,000,000 </td>
</tr>
<tr>
<td> United States </td>
<td> Washington, D.C. </td>
<td> North America </td>
<td> 325,000,000 </td>
<td> 18,000,000,000 </td>
</tr>
<tr>
<td> United Kingdom </td>
<td> London </td>
<td> Europe </td>
<td> 65,000,000 </td>
<td> 2,500,000,000 </td>
</tr>
<tr>
<td> France </td>
<td> Paris </td>
<td> Europe </td>
<td> 65,000,000 </td>
<td> 2,500,000,000 </td>
</tr>
<tr>
<td> Germany </td>
<td> Berlin </td>
<td> Europe </td>
<td> 80,000,000 </td>
<td> 3,500,000,000 </td>
</tr>
<tr>
<td> Italy </td>
<td> Rome </td>
<td> Europe </td>
<td> 60,000,000 </td>
<td> 2,000,000,000 </td>
</tr>
<tr>
<td> Japan </td>
<td> Tokyo </td>
<td> Asia </td>
<td> 125,000,000 </td>
<td> 4,500,000,000 </td>
</tr>
<tr>
<td> China </td>
<td> Beijing </td>
<td> Asia </td>
<td> 1,350,000,000 </td>
<td> 10,000,000,000 </td>
</tr>
<tr>
<td> Russia </td>
<td> Moscow </td>
<td> Europe </td>
<td> 145,000,000 </td>
<td> 1,500,000,000 </td>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
$("#countries").DataTable({
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"paging": true,
"lengthChange": true,
"searching": true,
});
});
</script>
</body>
</html>
Users learned to use the DataTables plugin in Jquery to arrange tables in proper format and add functionalities like searching and sorting.
296 Views
