DataTables Default Column Ordering with HTML Data Attribute

Question

I want to order the table by specific column with html data attribute instead of first column ascending ordering but i couldnt it.

Here my example table:

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
    </tbody>
</table>

I tried #1

<table id="example" data-order="3">

I tried #2

<table id="example" data-order="3, desc">

I tried #3

<table id="example" data-order="[[3, 'desc']]">

I dont want to use with jQuery like that:

$('#example').dataTable({
  order: [[3, 'desc']]
});

Bora · Accepted Answer · 2017-10-24 12:21:08Z

25

I found the issue that about quotes. Here is solution:

Right Format with Double Quote

data-order='[[3, "desc"]]'

Wrong Format with Single Quote

data-order="[[3, 'desc']]"

answered Oct 24, 2017 at 12:21

Bora

10.7k5 gold badges50 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Master Yoda Over a year ago

Good job, I discovered the answer here: datatables.net/examples/advanced_init/html5-data-options.html

Kukeltje Over a year ago

data-order="[[ 1, "asc" ]]" works too!

Master Yoda · Accepted Answer · 2017-10-24 12:21:47Z

Strangely, you have to define both parameters inside an array like this:

data-order='[[4, "asc"]]'

Example

$("#example").DataTable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example" data-order='[[4, "asc"]]'>
    <thead>
        <tr>
            <th >Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
    </tbody>
</table>

data-order="[[ 1, "asc" ]]" works too... Double quotes outside which is for me the 'beautiful' way ;-)

Collectives™ on Stack Overflow

DataTables Default Column Ordering with HTML Data Attribute

2 Answers 2

2 Comments

Example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related