使用HTML5数据属性的多列排序

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- *属性页面上的注释：

使用data-*属性作为初始化选项时，有两个要注意的要点：

• jQuery将自动从虚线字符串转换为DataTables使用的驼峰大小写表示法（例如，将data-page-length用于pageLength ）。
• 如果在属性内使用字符串，则它必须用双引号引起（因此，整个属性用单引号引起来）。 由于处理JSON data-这是jQuery的另一个要求。

解

您需要使用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%">

演示

有关代码和演示，请参见此jsFiddle 。