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使用输入字段在非数字列上排序

1 个答案: