Skip to content
Related Articles

Related Articles

Improve Article

How to initialize multiple tables using jQuery DataTables plugin ?

  • Last Updated : 15 Jan, 2021

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.




<!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=
  
    <!--jQuery library file -->
    <script type="text/javascript" 
    </script>
  
    <!--Datatable plugin JS library file -->
    <script type="text/javascript" 
    </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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :