Pagination using Datatables - GeeksforGeeks

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
<!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>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>
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
$(document).ready(function() {                    /* marksscored is sorted in descending */    $('#tableID').DataTable({        order: [[ 4, 'desc' ]]    });  });
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
$(document).ready(function() {      /* To hide column 2 and 3 */    $('#tableID').DataTable( {        "columnDefs": [            {                "targets": [ 2 ],                "visible": false,                "searchable": false            },            {                "targets": [ 3 ],                "visible": false            }        ]    } );} );
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-Plugin
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)