DataTables scrollY Option - GeeksforGeeks

31 May, 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 scrollY option is used to specify whether vertical scrolling should be enabled in a DataTable. This option will restrict the height of the DataTable to the given value and allow the user to scroll any overflowing content in the table itself. This can be used in situations where multiple tables need to be fit in a limited space. The height value can be given in any CSS unit or a number that would be treated as a pixel value.
Syntax:
{ scrollY: value }
Option Value: This option has a single value as mentioned above and described below:
value: This is a string value that specifies the height of the DataTable and enables vertical scrolling. The default value is an empty string.
The below example illustrates the use of this option.
Example 1: This example enables the vertical scrolling of the DataTable.
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>  <h1 style="color: green;">    GeeksForGeeks  </h1>  <h3>DataTables scrollY Option</h3>    <!-- HTML table with student data -->  <table id="tableID" class="display">    <thead>      <tr>        <th>ID</th>        <th>Name</th>        <th>Age</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>Sam</td>        <td>35</td>      </tr>      <tr>        <td>2</td>        <td>Sam</td>        <td>30</td>      </tr>      <tr>        <td>3</td>        <td>Sameer</td>        <td>45</td>      </tr>      <tr>        <td>4</td>        <td>Rob</td>        <td>4</td>      </tr>      <tr>        <td>5</td>        <td>Robber</td>        <td>68</td>      </tr>      <tr>        <td>6</td>        <td>Mikasa</td>        <td>25</td>      </tr>      <tr>        <td>7</td>        <td>Eren</td>        <td>23</td>      </tr>      <tr>        <td>8</td>        <td>Jean</td>        <td>35</td>      </tr>      <tr>        <td>9</td>        <td>Walter</td>        <td>65</td>      </tr>      <tr>        <td>10</td>        <td>Jessie</td>        <td>28</td>      </tr>      <tr>        <td>11</td>        <td>Gabi</td>        <td>20</td>      </tr>      <tr>        <td>12</td>        <td>Tim</td>        <td>30</td>      </tr>      <tr>        <td>13</td>        <td>Max</td>        <td>35</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Enable the vertical scrolling        // of data in DataTable to 160px        scrollY: "160px",          // Disable the paging and        // allow collapsing of the        // table when data is less        paging: false,        scrollCollapse: true      });    });   </script></body></html>
Output:
Example 2: This example disables the vertical scrolling of the DataTable.
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>  <h1 style="color: green;">    GeeksForGeeks  </h1>  <h3>DataTables scrollY Option</h3>    <!-- HTML table with student data -->  <table id="tableID" class="display">    <thead>      <tr>        <th>ID</th>        <th>Name</th>        <th>Age</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>Sam</td>        <td>35</td>      </tr>      <tr>        <td>2</td>        <td>Sam</td>        <td>30</td>      </tr>      <tr>        <td>3</td>        <td>Sameer</td>        <td>45</td>      </tr>      <tr>        <td>4</td>        <td>Rob</td>        <td>4</td>      </tr>      <tr>        <td>5</td>        <td>Robber</td>        <td>68</td>      </tr>      <tr>        <td>6</td>        <td>Mikasa</td>        <td>25</td>      </tr>      <tr>        <td>7</td>        <td>Eren</td>        <td>23</td>      </tr>      <tr>        <td>8</td>        <td>Jean</td>        <td>35</td>      </tr>      <tr>        <td>9</td>        <td>Walter</td>        <td>65</td>      </tr>      <tr>        <td>10</td>        <td>Jessie</td>        <td>28</td>      </tr>      <tr>        <td>11</td>        <td>Gabi</td>        <td>20</td>      </tr>      <tr>        <td>12</td>        <td>Tim</td>        <td>30</td>      </tr>      <tr>        <td>13</td>        <td>Max</td>        <td>35</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Disable the vertical scrolling        // of data in DataTable        scrollY: "",          // Disable the paging        paging: false,      });    });   </script></body></html>
Output:
jQuery-DataTables
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to redirect to a particular section of a page using HTML or jQuery?
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to reset a form using jQuery with .reset() method?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?