Open In App

DataTables orderCellsTop 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 orderCellsTop option is used to specify in which cell the order event handler will be applied to in the table. This can be used in cases when multiple complex headers are used. Setting the option to true will attach the order event handler to the top unique cell of the table, while setting the option to false will attach it to the bottom cell of the table, which is the default behaviour.

{ orderCellsTop: value }

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

  • value: This is a boolean value that is used to specify in which cell of the header the order event handler will be attached. The default value is false.

The examples below illustrate the use of this option.

 

Example 1: In this example, the order event handler will be applied to the top cell of the header.

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 orderCellsTop 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>
      <tr>
        <th>Day Selector</th>
        <th>Name Selector</th>
        <th>Age Selector</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({
  
        // Use the bottom cell for
        // the order listener
        orderCellsTop: false,
      });
    }); 
  </script>
</body>
  
</html>


Output:

Example 2: In this example, the order event handler will be applied to the bottom cell of the header.

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 orderCellsTop 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>
      <tr>
        <th>Day Selector</th>
        <th>Name Selector</th>
        <th>Age Selector</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({
  
        // Use the top unique cell for
        // the order listener
        orderCellsTop: true,
      });
    }); 
  </script>
</body>
  
</html>


Output:

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



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