DataTables pagingType Option

Last Updated : 13 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 pagingType option is used to specify the type of controls that will be displayed below the DataTable for pagination. It accepts a string value that can be specified by using 6 built-in types of available controls. These are specified by the following values.

simple: In this type of control, only the ‘Previous’ and ‘Next’ buttons are displayed.
simple_numbers: In this type of control, the ‘Previous’ and ‘Next’ buttons are displayed along with the page numbers.
full: In this type of control, only the ‘First’, ‘Previous’, ‘Next’ and ‘Last’ buttons are displayed.
full_numbers: In this type of control, the ‘First’, ‘Previous’, ‘Next’, and ‘Last’ buttons are displayed along with the page numbers.
numbers: In this type of control, only the page numbers are displayed.
first_last_numbers: In this type of control, the ‘First’ and ‘Last’ buttons are displayed along with the page numbers.

Other types can be added using DataTable plugins.

Syntax:

{ pagingType: value }

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

value: This is a string value that specifies the type of controls that will be displayed.

The example below illustrates the use of this option. We will see all the different paging types that are built-in to DataTables.

Example 1: In this type of control, the buttons are displayed along with the page numbers.

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> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pagingType Option</h3> 
  
  <!-- HTML table with random data -->
  <h4>pagingType: numbers</h4> 
  <table id="table_numbers" 
         class="display nowrap" 
         style="width: 100%;"> 
  </table> 
  
   
  <script> 
  
    // Define the columns and content 
    // of the DataTable 
    let columnData = [ 
      { title: "Day" }, 
      { title: "Name" }, 
      { title: "Age" } 
    ]; 
  
    let tableData = [ 
      ["2", "Ivor", "30"], 
      ["3", "Vance", "32"], 
      ["5", "Octavius", "43"], 
      ["0", "Abel", "35"], 
      ["3", "Cecilia", "32"], 
      ["4", "Sebastian", "36"], 
      ["5", "Uriah", "41"], 
      ["6", "Abigail", "15"], 
      ["10", "Sam", "68"], 
      ["33", "Richard", "25"] 
    ] 
  
    // Initialize the DataTable 
    $(document).ready(function () { 
      $('#table_numbers').DataTable({ 
        data: tableData, 
        columns: columnData, 
        pageLength: 4, 
  
        // Specify the paging type to be used 
        // in the DataTable 
        pagingType: "numbers" 
      }); 
    }); 
  
     </script> 
</body> 
</html>

Output:

Example 2: In this type of control, only the ‘Previous’ and ‘Next’ buttons are displayed.

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> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pagingType Option</h3> 
  
  <!-- HTML table with random data -->
  <h4>pagingType: simple</h4> 
  <table id="table_simple" 
         class="display nowrap" 
         style="width: 100%;"> 
  </table> 
  
   
  <script> 
  
    // Define the columns and content 
    // of the DataTable 
    let columnData = [ 
      { title: "Day" }, 
      { title: "Name" }, 
      { title: "Age" } 
    ]; 
  
    let tableData = [ 
      ["2", "Ivor", "30"], 
      ["3", "Vance", "32"], 
      ["5", "Octavius", "43"], 
      ["0", "Abel", "35"], 
      ["3", "Cecilia", "32"], 
      ["4", "Sebastian", "36"], 
      ["5", "Uriah", "41"], 
      ["6", "Abigail", "15"], 
      ["10", "Sam", "68"], 
      ["33", "Richard", "25"] 
    ] 
  
    // Initialize the DataTable 
      $(document).ready(function () { 
      $('#table_simple').DataTable({ 
  
        data: tableData, 
        columns: columnData, 
        pageLength: 4, 
  
        // Specify the paging type to be used 
        // in the DataTable 
        pagingType: "simple" 
      }); 
    }); 
  
     </script> 
</body> 
</html>

Output:

Example 3:In this type of control, the ‘Previous’ and ‘Next’ buttons are displayed along with the page numbers

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> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pagingType Option</h3> 
  
  <!-- HTML table with random data -->
  <h4>pagingType: simple_numbers</h4> 
  <table id="table_simple_numbers" 
         class="display nowrap" 
         style="width: 100%;"> 
  </table> 
   
  <script> 
  
    // Define the columns and content 
    // of the DataTable 
    let columnData = [ 
      { title: "Day" }, 
      { title: "Name" }, 
      { title: "Age" } 
    ]; 
  
    let tableData = [ 
      ["2", "Ivor", "30"], 
      ["3", "Vance", "32"], 
      ["5", "Octavius", "43"], 
      ["0", "Abel", "35"], 
      ["3", "Cecilia", "32"], 
      ["4", "Sebastian", "36"], 
      ["5", "Uriah", "41"], 
      ["6", "Abigail", "15"], 
      ["10", "Sam", "68"], 
      ["33", "Richard", "25"] 
    ] 
  
    // Initialize the DataTable 
     $(document).ready(function () { 
      $('#table_simple_numbers').DataTable({ 
  
        data: tableData, 
        columns: columnData, 
        pageLength: 4, 
  
        // Specify the paging type to be used 
        // in the DataTable 
        pagingType: "simple_numbers" 
      }); 
    }); 
  
     </script> 
</body> 
</html>

Output:

Example 4: In this type of control, only the ‘First’, ‘Previous’, ‘Next’, and ‘Last’ buttons are displayed.

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> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pagingType Option</h3> 
  
  <!-- HTML table with random data -->
  <h4>pagingType: full</h4> 
  <table id="table_full" 
         class="display nowrap" 
         style="width: 100%;"> 
  </table> 
   
  <script> 
  
    // Define the columns and content 
    // of the DataTable 
    let columnData = [ 
      { title: "Day" }, 
      { title: "Name" }, 
      { title: "Age" } 
    ]; 
  
    let tableData = [ 
      ["2", "Ivor", "30"], 
      ["3", "Vance", "32"], 
      ["5", "Octavius", "43"], 
      ["0", "Abel", "35"], 
      ["3", "Cecilia", "32"], 
      ["4", "Sebastian", "36"], 
      ["5", "Uriah", "41"], 
      ["6", "Abigail", "15"], 
      ["10", "Sam", "68"], 
      ["33", "Richard", "25"] 
    ] 
  
    // Initialize the DataTable 
     $(document).ready(function () { 
      $('#table_full').DataTable({ 
  
        data: tableData, 
        columns: columnData, 
        pageLength: 4, 
  
        // Specify the paging type to be used 
        // in the DataTable 
        pagingType: "full" 
      }); 
    }); 
  
     </script> 
</body> 
</html>

Output:

Example 5: In this type of control, the ‘First’, ‘Previous’, ‘Next’, and ‘Last’ buttons are displayed along with the page numbers.

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> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pagingType Option</h3> 
  
  <!-- HTML table with random data -->
  <h4>pagingType: full_numbers</h4> 
  <table id="table_full_numbers" 
         class="display nowrap" 
         style="width: 100%;"> 
  </table> 
   
  <script> 
  
    // Define the columns and content 
    // of the DataTable 
    let columnData = [ 
      { title: "Day" }, 
      { title: "Name" }, 
      { title: "Age" } 
    ]; 
  
    let tableData = [ 
      ["2", "Ivor", "30"], 
      ["3", "Vance", "32"], 
      ["5", "Octavius", "43"], 
      ["0", "Abel", "35"], 
      ["3", "Cecilia", "32"], 
      ["4", "Sebastian", "36"], 
      ["5", "Uriah", "41"], 
      ["6", "Abigail", "15"], 
      ["10", "Sam", "68"], 
      ["33", "Richard", "25"] 
    ] 
  
    // Initialize the DataTable 
     $(document).ready(function () { 
      $('#table_full_numbers').DataTable({ 
  
        data: tableData, 
        columns: columnData, 
        pageLength: 4, 
  
        // Specify the paging type to be used 
        // in the DataTable 
        pagingType: "full_numbers" 
      }); 
    }); 
     </script> 
</body> 
</html>

Output:

Example 6: In this type of control, the ‘First’ and ‘Last’ buttons are displayed along with the page numbers.

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> 
  <h2 style="color:green;"> 
    GeeksForGeeks 
  </h2> 
  <h3>DataTables pagingType Option</h3> 
  
  <!-- HTML table with random data -->
  <h4>pagingType: first_last_numbers</h4> 
  <table id="table_first_last_numbers"
         class="display nowrap" 
         style="width: 100%;"> 
  </table> 
   
  <script> 
  
    // Define the columns and content 
    // of the DataTable 
    let columnData = [ 
      { title: "Day" }, 
      { title: "Name" }, 
      { title: "Age" } 
    ]; 
  
    let tableData = [ 
      ["2", "Ivor", "30"], 
      ["3", "Vance", "32"], 
      ["5", "Octavius", "43"], 
      ["0", "Abel", "35"], 
      ["3", "Cecilia", "32"], 
      ["4", "Sebastian", "36"], 
      ["5", "Uriah", "41"], 
      ["6", "Abigail", "15"], 
      ["10", "Sam", "68"], 
      ["33", "Richard", "25"] 
    ] 
  
    // Initialize the DataTable 
     $(document).ready(function () { 
      $('#table_first_last_numbers').DataTable({ 
  
        data: tableData, 
        columns: columnData, 
        pageLength: 4, 
  
        // Specify the paging type to be used 
        // in the DataTable 
        pagingType: "first_last_numbers" 
      }); 
    }); 
     </script> 
</body> 
</html>