DataTables paging Option

Last Updated : 31 May, 2021

DataTables is jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed.

The paging option is used to specify whether the paging of the DataTable is enabled or not. The DataTable splits the records being shown in multiple pages so that only a certain number of records are shown on a page. The number of records to show can be selected using the dropdown menu. A true value enables paging and a false value disables it.

Syntax:

{ paging: value }

Option Value: This option has a single value as mentioned above and described below:

value: This is a boolean value that specifies whether paging of the DataTable is enabled or not. The default value is true.

The below example illustrates the use of this option.

Example 1: This example disables the paging functionality of the DataTable.

HTML

<html> 
<head> 
  <!-- jQuery -->
  <script type="text/javascript"
          src="https://code.jquery.com/jquery-3.5.1.js"> 
  </script> 
  
  <!-- DataTables CSS -->
  <link rel="stylesheet" 
        href= 
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"> 
  
  <!-- DataTables JS -->
  <script src= 
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> 
  </script> 
</head> 
  
<body> 
  <h1 style="color: green;"> 
    GeeksForGeeks 
  </h1> 
  <h3>DataTables Paging Option</h3> 
  
  <!-- HTML table with student data -->
  <table id="tableID" class="display"> 
    <thead> 
      <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Age</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>1</td> 
        <td>Sam</td> 
        <td>35</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Sam</td> 
        <td>30</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>Sameer</td> 
        <td>45</td> 
      </tr> 
      <tr> 
        <td>4</td> 
        <td>Rob</td> 
        <td>4</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Robber</td> 
        <td>68</td> 
      </tr> 
      <tr> 
        <td>6</td> 
        <td>Mikasa</td> 
        <td>25</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>Eren</td> 
        <td>23</td> 
      </tr> 
      <tr> 
        <td>8</td> 
        <td>Jean</td> 
        <td>35</td> 
      </tr> 
      <tr> 
        <td>9</td> 
        <td>Walter</td> 
        <td>65</td> 
      </tr> 
      <tr> 
        <td>10</td> 
        <td>Jessie</td> 
        <td>28</td> 
      </tr> 
      <tr> 
        <td>11</td> 
        <td>Gabi</td> 
        <td>20</td> 
      </tr> 
      <tr> 
        <td>12</td> 
        <td>Tim</td> 
        <td>30</td> 
      </tr> 
      <tr> 
        <td>13</td> 
        <td>Max</td> 
        <td>35</td> 
      </tr> 
    </tbody> 
  </table> 
  <script> 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#tableID').DataTable({ 
  
        // Disable paging 
        // of the DataTable 
        paging: false 
      }); 
    });  
  </script> 
</body> 
</html>

Output:

Example 2: This example enables the paging functionality of the DataTable.

HTML

<html> 
<head> 
  <!-- jQuery -->
  <script type="text/javascript" 
          src="https://code.jquery.com/jquery-3.5.1.js"> 
  </script> 
  
  <!-- DataTables CSS -->
  <link rel="stylesheet" 
        href= 
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"> 
  
  <!-- DataTables JS -->
  <script src= 
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> 
  </script> 
</head> 
<body> 
  <h1 style="color: green;"> 
    GeeksForGeeks 
  </h1> 
  <h3>DataTables Paging Option</h3> 
  
  <!-- HTML table with student data -->
  <table id="tableID" class="display"> 
    <thead> 
      <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Age</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>1</td> 
        <td>Sam</td> 
        <td>35</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Sam</td> 
        <td>30</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>Sameer</td> 
        <td>45</td> 
      </tr> 
      <tr> 
        <td>4</td> 
        <td>Rob</td> 
        <td>4</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Robber</td> 
        <td>68</td> 
      </tr> 
      <tr> 
        <td>6</td> 
        <td>Mikasa</td> 
        <td>25</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>Eren</td> 
        <td>23</td> 
      </tr> 
      <tr> 
        <td>8</td> 
        <td>Jean</td> 
        <td>35</td> 
      </tr> 
      <tr> 
        <td>9</td> 
        <td>Walter</td> 
        <td>65</td> 
      </tr> 
      <tr> 
        <td>10</td> 
        <td>Jessie</td> 
        <td>28</td> 
      </tr> 
      <tr> 
        <td>11</td> 
        <td>Gabi</td> 
        <td>20</td> 
      </tr> 
      <tr> 
        <td>12</td> 
        <td>Tim</td> 
        <td>30</td> 
      </tr> 
      <tr> 
        <td>13</td> 
        <td>Max</td> 
        <td>35</td> 
      </tr> 
    </tbody> 
  </table> 
  <script> 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#tableID').DataTable({ 
  
        // Enable paging 
        // of the DataTable 
        paging: true 
      }); 
    });  
  </script> 
</body> 
</html>