DataTables pageLength Option - GeeksforGeeks

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>
Output:
pagelength is 6 
Reference link: https://datatables.net/reference/option/pageLength
jQuery-DataTables
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?