DataTables orderMulti Option

Last Updated : 22 Jul, 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 orderMulti option is used to specify whether multiple columns can be sorted at one time. The default behavior of DataTables allows the sorting of multiple columns at one time by holding the Shift key and clicking on the header cells in the order that needs to be sorted. However, this functionality increases the complexity of the operations as sorting multiple columns may cause performance issues on older systems or when dealing with large datasets.

Note that this option does not prevent the use of other methods in the API on the table and only prevents the user from doing so.

{ orderMulti: 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 whether sorting multiple columns together will be allowed by the user. The default value is true.

The examples below illustrate the use of this option.

Example 1: In this example, multiple sorting of columns is disabled.

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= 
"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 orderMulti 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({ 
  
        // Disable the ordering of 
        // multiple columns in the 
        // DataTable 
        orderMulti: false, 
      }); 
    });  
  </script> 
</body> 
  
</html>

Output:

Example 2: In this example, multiple sorting of columns is enabled.

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= 
"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 orderMulti 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({ 
  
        // Enable the ordering of 
        // multiple columns in the 
        // DataTable 
        orderMulti: true, 
      }); 
    });  
  </script> 
</body> 
  
</html>