DataTables pageLength Option

Last Updated : 13 Jul, 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 pageLength option is used to specify the number of rows of the table that are to be displayed on one page. This option is relevant when the pagination is used to display many rows. It accepts an integer value that denotes the number of rows to be displayed.

Syntax:

{ pageLength: value }

Parameters: This option has a single value as mentioned above and described below.

value: This is an integer value that specifies the number of rows to be displayed. The default value is 10.

The examples below illustrate the usage of this option.

Example 1: This example demonstrates setting the number of rows per page to be 3.

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> 
  <style> 
    th 
    { 
       text-align:left; 
    } 
  </style> 
</head> 
<body> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pageLength Option</h3> 
  
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap"> 
    <thead> 
      <tr> 
        <th>Day</th> 
        <th>Name</th> 
        <th>Age</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>2</td> 
        <td>Patricia</td> 
        <td>22</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Caleb</td> 
        <td>47</td> 
      </tr> 
      <tr> 
        <td>1</td> 
        <td>Abigail</td> 
        <td>48</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Rahim</td> 
        <td>44</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Sheila</td> 
        <td>22</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Lance</td> 
        <td>48</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Erin</td> 
        <td>48</td> 
      </tr> 
      <tr> 
        <td>1</td> 
        <td>Christopher</td> 
        <td>28</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Roary</td> 
        <td>35</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Astra</td> 
        <td>37</td> 
      </tr> 
    </tbody> 
  </table> 
  <script> 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#tableID').DataTable({ 
  
        // Set the number of rows to be  
        // displayed per page on the DataTable 
        pageLength: 3 
      }); 
    });  
  </script> 
</body> 
</html>

Output:

Example 2: This example demonstrates setting the number of rows per page to be 6.

HTML

<!DOCTYPE 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> 
  <style> 
    th { 
      text-align:left;  
    } 
  </style> 
</head> 
  
<body> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pageLength Option</h3> 
  
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap"> 
    <thead> 
      <tr> 
        <th>Day</th> 
        <th>Name</th> 
        <th>Age</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>2</td> 
        <td>Patricia</td> 
        <td>22</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Caleb</td> 
        <td>47</td> 
      </tr> 
      <tr> 
        <td>1</td> 
        <td>Abigail</td> 
        <td>48</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Rahim</td> 
        <td>44</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Sheila</td> 
        <td>22</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Lance</td> 
        <td>48</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Erin</td> 
        <td>48</td> 
      </tr> 
      <tr> 
        <td>1</td> 
        <td>Christopher</td> 
        <td>28</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Roary</td> 
        <td>35</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Astra</td> 
        <td>37</td> 
      </tr> 
    </tbody> 
  </table> 
  <script> 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#tableID').DataTable({ 
  
        // Set the number of rows to be  
        // displayed per page on the DataTable 
        pageLength: 6 
      }); 
    });  
  </script> 
</body> 
  
</html>