通過自定義sortId對dataTables列進行排序

我使用jQuery DataTables 1.9.4來顯示數據。我在單元格中顯示了新的自定義類型，並且爲每種類型添加自定義排序功能將非常棘手且維護性很差，因爲顯示格式不容易與代表值關聯。例如，顯示格式可以是3 oranges, 4 apples，然後排序的值將是7。通過自定義sortId對dataTables列進行排序

我能想到的最佳解決方案是爲每個單元格提供一個sortId屬性，這將是一個整數，並且列的單元格將通過此sortId排序。

before 
<td>3 oranges, 4 apples</td> 

after 
<td sortId="7">3 oranges, 4 apples</td>

我搜索在網絡上，它似乎並沒有成爲數據表功能。我怎麼能做到這一點？

請注意，sortId不必一定是<td>的屬性，只要不需要太多字符，任何其他隱藏的解決方案都可以。

data-sort屬性絕對是我一直在尋找的感謝！

我嘗試添加此屬性有點沒有運氣（均與data-sort和data-order）。

我需要調整桌子上的任何東西使其工作嗎？
我使用2012版數據表（v1.9.4）是否已在此版本中實現此功能？文件中的文本搜索jquery.dataTable.js顯示data-order和data-sort字符串的零匹配。

來源

2016-03-21 Patrick from NDepend team

jQuery的數據表1.10+

如果你想使用td元素的屬性，有data-sort屬性，它定義了將用於HTML源數據的排序值。

<td data-sort="7">3 oranges, 4 apples</td>

有關更多信息和演示請參閱this example。

或者，您可以使用columns.render選項，但更適合使用Ajax或JavaScript源數據。當數據被分類

jQuery的數據表1.9

使用aoColumnDefs.mRender以產生內容用於細胞，如下所示：

var table = $('#example').dataTable({ 
    "aoColumnDefs": [{ 
     "aTargets": [0], 
     "mRender": function(data, type, full) { 
      if (type === "sort") { 
       var numbers = data.match(/\d+/g); 

       data = 0; 
       for (var i = 0; i < numbers.length; i++) { 
        data += Number(numbers[i]); 
       } 
      } 
      return data; 
     } 
    }] 
});

代碼和示範參見this jsFiddle。

jQuery DataTables 1.9的替代解決方案是使用隱藏元素並在那裏提供排序值。請注意，這些值將作爲字符串進行比較，以便在必要時爲數字添加零填充。

<tr> 
    <td><span style="display:none">0007</span> 1 apple, 6 oranges</td> 
</tr> 
<tr> 
    <td><span style="display:none">0005</span> 3 apples, 2 oranges</td> 
</tr> 
<tr> 
    <td><span style="display:none">0006</span> 5 apples, 1 orange</td> 
</tr>

請參閱this jsFiddle的代碼和演示。

來源

2016-03-21 12:04:30

正交數據也將是一個很好的解決方案 - > https://datatables.net/examples/ajax/orthogonal-data.html ...根據'type'返回不同值的列渲染器也可以工作。 – davidkonrad

@davidkonrad，'columns.render'不適用於這裏，雖然我在我的答案中提到它。你如何想象解析'3個桔子，4個蘋果'並用'columns.render'生成'7'？ –

通過'/^\ d + /。match（s）'進行循環，並將找到的所有數字相加 - 最後以7結尾，或者在字符串內找到。 – davidkonrad

通過自定義sortId對dataTables列進行排序

回答

相關問題