DataTables 在带有输入字段的非数字列上排序

Question

我正在按照这个 DataTables 示例添加对具有输入字段的列的排序：http://datatables.net/examples/plug-ins/dom_sort.html

在我下面的代码中，第二个目标列 (6) 是一个数字字段，并且排序很好，但是第一列 (5) 是一个文本列，根本没有排序。使用 Chrome 开发人员工具，我可以看到它进入函数，但没有进行排序。两列都是输入字段。我使用的是最新的 DataTables 版本 1.10.7。

$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
{
   return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
      return $('input', td).val();
   } );
}


 var table = $("#example").DataTable({
   "scrollY": "500px",
   "scrollX": "675px",
   "scrollCollapse": true,
   "paging": false,
   "order": [],
   "deferRender": true,
   "orderClasses": false,
   "columnDefs": [
     { "orderDataType": "dom-text", "targets": [5,6] }
    ]
 });

Answer 1

解决方案

与 Live DOM Ordering example 一样，您需要使用 dom-text 对包含文本的 <input> 元素进行排序，使用 dom-text-numeric 对包含数字的 <input> 元素进行排序。

/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val();
    } );
}

/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val() * 1;
    } );
}

$(document).ready(function (){
    $('#example').dataTable( {
        /* ... other options ... */
        "columnDefs": [
            { "targets": 1, "orderDataType": "dom-text-numeric" },
            { "targets": 2, "orderDataType": "dom-text", "type": "string" }
        ]
    } );
});

演示

有关代码和演示，请参阅 this jsFiddle。

DataTables 在带有输入字段的非数字列上排序

DataTables sorting on non-numeric column with input field

sorting

datatables