Multi-column ordering using HTML5 data- attribute

Question

I'm trying to use the multi-column ordering in jQuery DataTables as HTML5 data- attributes. Is this even possible?

I've already tried this:

<th>Firstname</th>
<th data-orderData="[ 3, 2 ]">Lastname</th>

but it didn't work, while this works fine:

<th data-orderable="false" data-searchable="false">Edit</th>

and I've tried to declare it as table data- attribute like this:

<table id="myTable" data-columnDefs="[ {'targets': [ 5 ], 'orderData': [ 5, 3, 2 ]} ]">

but this also didn't work, while this works fine:

<table id="myTable" data-order="[[ 5, 'asc' ], [ 3, 'asc' ], [ 2, 'asc' ]]">

I couldn't find anything in the official documentation about multi-column ordering with HTML5 data- attributes. Is this even possible to realize with HTML5 data- attributes?

Gyrocode.com · Accepted Answer · 2016-04-11 21:42:14Z

CAUSE

See notes on HTML5 data-* attributes page:

There are two important points to consider when using data-* attributes as initialization options:

jQuery will automatically convert from dashed strings to the camel case notation used by DataTables (e.g. use data-page-length for pageLength).

If using a string inside the attribute it must be in double quotes (and therefore the attribute as a whole in single quotes). This is another requirement of jQuery's due to the processing of JSON data- data.

SOLUTION

You need to use data-column-defs instead of data-columnDefs and make sure you're using double quotes in option names.

<table data-column-defs='[ {"targets": [ 3 ], "visible": false} ]' id="example" class="display" cellspacing="0" width="100%">

or

<table data-column-defs="[ {&quot;targets&quot;: [ 3 ], &quot;visible&quot;: false} ]" id="example" class="display" cellspacing="0" width="100%">

DEMO

See this jsFiddle for code and demonstration.

Collectives™ on Stack Overflow

Multi-column ordering using HTML5 data- attribute

1 Answer 1

CAUSE

SOLUTION

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CAUSE

SOLUTION

DEMO

Comments

Your Answer

Sign up or log in

Post as a guest

Related