使用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-* attributes页面上的说明：

  

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

样本

请参阅this jsFiddle以获取代码和演示。