DataTables displayStart Option

Last Updated : 19 Jul, 2021

DataTables is a 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 displayStart option is used to specify the row from which the DataTable will start displaying its rows. It is used when pagination is enabled and the table has to be started from a certain row. Specifying a row will start on the table at that row’s corresponding page.

Syntax:

{ displayStart: value }

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

value: This is a number that denotes the row from where the DataTable will start displaying the table.

The examples below illustrate the use of this option.

Example 1: In this example, the value is specified such that it starts at the given row and its corresponding page.

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> 
    td{ 
     text-align:center; 
    } 
  </style> 
</head> 
<body> 
  <h2 style="color:green;"> 
    GeeksforGeeks 
  </h2> 
  <h3>DataTables displayStart Option</h3> 
  
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap"> 
    <thead> 
      <tr> 
        <th>Number</th> 
        <th>Name</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>1</td> 
        <td>One</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Two</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>Three</td> 
      </tr> 
      <tr> 
        <td>4</td> 
        <td>Four</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Five</td> 
      </tr> 
      <tr> 
        <td>6</td> 
        <td>Six</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>Seven</td> 
      </tr> 
      <tr> 
        <td>8</td> 
        <td>Eight</td> 
      </tr> 
      <tr> 
        <td>9</td> 
        <td>Nine</td> 
      </tr> 
      <tr> 
        <td>10</td> 
        <td>Ten</td> 
      </tr> 
    </tbody> 
  </table> 
  <script> 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#tableID').DataTable({ 
  
        lengthMenu: [ 3, 5, 10 ], 
          
        // Set the starting row 
        // of the DataTable 
        displayStart: 4 
      }); 
    });  
  </script> 
</body> 
</html>

Output:

displaystart

Example 2: Similar to the above example, the value is specified such that it starts at the given row and its corresponding page.

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> 
    td 
    { 
       text-align:center; 
    } 
  </style> 
</head> 
<body> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables displayStart Option</h3> 
  
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap"> 
    <thead> 
      <tr> 
        <th>Number</th> 
        <th>Name</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>1</td> 
        <td>One</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Two</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>Three</td> 
      </tr> 
      <tr> 
        <td>4</td> 
        <td>Four</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Five</td> 
      </tr> 
      <tr> 
        <td>6</td> 
        <td>Six</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>Seven</td> 
      </tr> 
      <tr> 
        <td>8</td> 
        <td>Eight</td> 
      </tr> 
      <tr> 
        <td>9</td> 
        <td>Nine</td> 
      </tr> 
      <tr> 
        <td>10</td> 
        <td>Ten</td> 
      </tr> 
    </tbody> 
  </table> 
  <script> 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#tableID').DataTable({ 
  
        lengthMenu: [ 5, 10 ], 
          
        // Set the starting row 
        // of the DataTable 
        displayStart: 5 
      }); 
    });  
  </script> 
</body> 
</html>