A Data Table is a plug-in for the jQuery JavaScript library that allows you to add advanced interaction controls to your HTML tables. It provides a wide range of features such as sorting, filtering, pagination, and scrolling, to name a few.
Functionality of a Data Table plug-in:
- Sorting: We can use the Data Table plug-in to sort our table data by clicking on the table headers. For example, if we have a table of employee data with columns for name, position, and salary, we can click on the “Position” or “Salary” headers to sort the table by those columns.
- Filtering: We can use the Data Table plug-in to filter our table data by using the search box. For example, if we have a large table of employee data and we only want to see rows where the position is “Manager”, we can type “Manager” into the search box and the Data Table will only display the rows that match our search criteria.
- Pagination: We can use the Data Table plug-in to split our table data into multiple pages. For example, if we have a large table of employee data and we only want to display 10 rows per page, we can use the Data Table to create pagination links that allow us to navigate between the different pages.
- Scrolling: We can use the Data Table plug-in to add horizontal or vertical scrolling to our table. For example, if we have a wide table of data and we want to allow the user to scroll horizontally to see all the columns, we can use the Data Table to enable horizontal scrolling.
These are just a few examples of the features that are available with a Data Table plug-in. There are many more features and customization options available, and we can use the Data Table plug-in to create a wide variety of interactive tables for our web applications.
Example:
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css"
href=
<script type="text/javascript"
src=
</script>
<script type="text/javascript"
src=
</script>
</head>
<body>
<h2>Datatable Example</h2>
<table id="datatable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Naruto</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Kirito</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Zoro</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Ash</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Bob</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Itachi</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Levi</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Luffy</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Yagami</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Okabe</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Elric</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Uzumaki</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Guts</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2021/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Eren</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2021/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
<br />
<div id="resultID"></div>
<script>
$(document).ready(function() {
$('#datatable').DataTable();
} );
</script>
</body>
</html>
|
Output:
Pagination feature
Feature: pagination
Filtering using a search box feature
feature: Dynamic Searching
Here are some more features that are commonly available with a Data Table plug-in:
- Responsive design: The Data Table can automatically adjust its layout based on the size of the screen, so it looks good on desktop, tablet, and mobile devices.
- Column resizing: The user can resize the columns by dragging the edges of the column headers.
- Row selection: The user can select one or more rows using checkboxes or by clicking on the rows.
- Cell editing: The user can edit the contents of a cell by clicking on it and typing in a new value.
- Column reordering: The user can drag and drop the column headers to change the order of the columns.
- Custom cell rendering: You can specify custom rendering functions to control how the data in each cell is displayed.
- Custom filtering: You can specify custom filtering functions to allow the user to filter the table data in more advanced ways.
- Custom sorting: You can specify custom sorting functions to control the order in which the table data is displayed.
- Internationalization: The Data Table supports multiple languages and can be localized to display text in different languages.
- Extensibility: You can add custom plugins to the Data Table to extend its functionality.