jquery - 使用 HTML5 data- 属性进行多列排序

Question

我正在尝试使用 jQuery DataTables 中的多列排序作为 HTML5 data- 属性。这可能吗？

我已经尝试过这个:

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

但它不起作用，而这工作正常:

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

并且我尝试将其声明为表 data- 属性，如下所示:

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

但这也不起作用，虽然这工作正常:

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

我在官方文档中找不到有关使用 HTML5 data- 属性进行多列排序的任何内容。这是否可以通过 HTML5 data- 属性来实现？

Answer 1

原因

请参阅 HTML5 data-* attributes 的注释页面:

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.

解决方案

您需要使用 data-column-defs 而不是 data-columnDefs 并确保在选项名称中使用双引号 .

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

或

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

演示

参见this jsFiddle用于代码和演示。