How to initialize multiple tables using jQuery DataTables plugin ?
Last Updated :
30 Jul, 2024
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, and multiple-column ordering.
In this article, we will learn to initialize multiple HTML tables using the jQuery DataTables 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:
https: //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Example: Initialization of multiple tables is handled with one line of code by using the table.display selector. Both the tables can be operated together, but they are executed independently.
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>
Multiple tables operations
using jQuery Datatables
</h2>
<!--HTML tables with student data-->
<table id="" 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 />
<table id="" 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>ST15</td>
<td>Varun</td>
<td>41</td>
<td>male</td>
<td>262</td>
</tr>
<tr>
<td>ST16</td>
<td>Waheeda</td>
<td>47</td>
<td>Female</td>
<td>373</td>
</tr>
<tr>
<td>ST17</td>
<td>Charu</td>
<td>31</td>
<td>female</td>
<td>475</td>
</tr>
<tr>
<td>ST18</td>
<td>Dhriti</td>
<td>45</td>
<td>female</td>
<td>227</td>
</tr>
<tr>
<td>ST19</td>
<td>Haritha</td>
<td>39</td>
<td>female</td>
<td>295</td>
</tr>
<tr>
<td>ST20</td>
<td>Faran</td>
<td>39</td>
<td>male</td>
<td>340</td>
</tr>
<tr>
<td>ST21</td>
<td>Gaurav</td>
<td>31</td>
<td>male</td>
<td>562</td>
</tr>
<tr>
<td>ST22</td>
<td>Fenny</td>
<td>41</td>
<td>Female</td>
<td>349</td>
</tr>
<tr>
<td>ST23</td>
<td>Mamta</td>
<td>29</td>
<td>Female</td>
<td>471</td>
</tr>
<tr>
<td>ST23</td>
<td>Kamat</td>
<td>44</td>
<td>male</td>
<td>319</td>
</tr>
</tbody>
</table>
<script>
/* Initialization of datatables */
$(document).ready(function () {
$('table.display').DataTable();
});
</script>
</body>
</html>
Output:
The following output shows that data for both the tables are loaded after initialization.
The following output shows that both the tables are executed independently showing the "searching" operation for "female" students.
Similar Reads
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
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 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 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 JSON Data in an HTML Table Using jQuery? The task is to fetch data from the given JSON file and convert data into an HTML table. Approach: We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON() method to fetch the data from the file's loc
2 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