Skip to content
Related Articles

Related Articles

Pagination using Datatables
  • Last Updated : 12 Jan, 2021

DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for the webpage. In this article, we will learn to implement pagination using DataTables. Other features include sorting and multiple column ordering.

The pre-compiled files which are needed to implement codes are

CSS:

<link rel=”stylesheet” href=”https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css” />

JavaScript:



<script type=”text/javascript” src=”https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js”></script>

Example 1: The following example demonstrates pagination using DataTables. In the HTML part, a table is defined with student’s data. The JavaScript handles the initialization of DataTable. 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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" src=
     </script>
</head>
  
<body>
    <h2>Pagination using jQuery Datatables </h2>
  
    <!--HTML table 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 datatable */
        $(document).ready(function() {
            $('#tableID').DataTable({ });
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before execute:

  • After execute:

Example 2: The following code snippet should be implemented in the JavaScript part of the above HTML code. It demonstrates the setting of the plugin option to display student’s marks scored in descending order.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$(document).ready(function() {
                
    /* marksscored is sorted in descending */
    $('#tableID').DataTable({
        order: [[ 4, 'desc' ]]
    });  
});

chevron_right


Output:

Example 3: The following code snippet demonstrates the hiding of some selected columns of the above student table. Include the below snippet in the JavaScript part of the first HTML example code.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

$(document).ready(function() {
  
    /* To hide column 2 and 3 */
    $('#tableID').DataTable( {
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false
            }
        ]
    } );
} );

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :