Open In App

DataTables lengthMenu Option

Improve
Improve
Like Article
Like
Save
Share
Report

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 lengthMenu option is used to specify the options that are available in the drop-down list that controls the number of rows that a single page will have when pagination is enabled. It can be specified with either a one-dimensional list that allows only specifying the number of rows or a two-dimensional list that allows specifying both the number of rows and the text that will be actually displayed in the drop-down list.

The length values specified have to be a positive number. Any negative value specified will display all available rows in the table and disable pagination.

Syntax:

{ lengthMenu: value }

 

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

  • value: This can be a one-dimensional or two-dimensional array that determines the pagination length menu along with the text that will be displayed.

The examples below illustrate the use of this option.

Example 1: In this example, a one-dimensional array is used to specify the options drop-down length.

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=
  
  <!-- DataTables JS -->
  <script src=
  </script>
</head>
  
<body>
  <h1 style="color: green;">
    GeeksForGeeks
  </h1>
  <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>4</td>
        <td>Mikasa</td>
        <td>48</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Astra</td>
        <td>37</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Eren</td>
        <td>48</td>
      </tr>
    </tbody>
  </table>
  
  <script>
  
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
  
        // Set the pagination length menu
        // to the given allowed sizes
        lengthMenu: [ 3, 5, 10 ]
      });
    }); 
  </script>
</body>
  
</html>


Output:

Example 2: In this example, a two-dimensional array is used to specify the options drop-down length and the text that will be used for them.

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=
  
  <!-- DataTables JS -->
  <script src=
  </script>
</head>
  
<body>
  <h1 style="color: green;">
    GeeksForGeeks
  </h1>
  <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>4</td>
        <td>Mikasa</td>
        <td>48</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Astra</td>
        <td>37</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Eren</td>
        <td>48</td>
      </tr>
    </tbody>
  </table>
  
  <script>
  
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
  
        // Set the pagination length menu
        // to the given allowed sizes
        // and display the given labels
        lengthMenu: [
          [ 3, 5, 10, -1 ],
          [ "Some", "More", "Some More", "All"]
        ]
      });
    }); 
  </script>
</body>
  
</html>


Output:

Reference: https://datatables.net/reference/option/lengthMenu



Last Updated : 21 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads