DataTables order Option - GeeksforGeeks

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 DataTables also exposes a powerful API that can be further used to modify how the data is displayed.
The order option is used to specify the rows of the DataTable that have to be ordered and their direction. It accepts a two-dimensional array that allows the ordering to be specified in multiple columns at once. The column defined first would be given more priority in sorting. The default value is [[0, ‘asc’]], which means that only the first column is sorted in ascending order.
Syntax:
{ order: value }
Parameters: This option has a single value as mentioned above and described below.
value: This is a multi-dimension array value that specifies the rows and direction that the columns are to be sorted. The first value in each of the arrays is the column number to be ordered, which starts from ‘0’ and the second one is its direction, which can be the values ‘asc‘ or ‘desc‘.
 
Example 1: In this example, the 3rd column is sorted in ascending order.
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 order 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>2</td>        <td>Astra</td>        <td>37</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Set the 3rd column of the        // DataTable to ascending order        order: [[2, 'asc']]      });    });   </script></body></html>
Output:
Example 2: In this example, the 1st column is sorted in ascending order, and then the 2nd column is sorted in descending order.
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>     th      {       text-align:left;       }  </style></head><body>  <h2 style="color:green;">    GeeksForGeeks  </h2>  <h3>DataTables order 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>2</td>        <td>Astra</td>        <td>37</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Set the 1st column of the        // DataTable to ascending order        // and the 2nd to descending order        order: [[0, 'asc'], [1, 'desc']]      });    });   </script></body></html>
Output: 
ascending order of 1st and descending order of 2nd column
Reference link: https://datatables.net/reference/option/order
jQuery-DataTables
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?