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>
<head>
<!-- jQuery -->
<script type="text/javascript" </script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
<!-- DataTables JS -->
<script src=
</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>
<head>
<!-- jQuery -->
<script type="text/javascript" </script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
<!-- DataTables JS -->
<script src=
</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