如何使用 jquery 数据表对输入值进行排序

Question

我正在尝试将 table 中的日期排序为 Jquery "Datatables"。

这是html/php我写的：

<td><input id='".$row['id']."' class='delivery_date ".$flatpickr."' data-io='edit' data-date='".$row['delivery_date']."' value='".$row['delivery_date']."' style='color: ".$color."'/></td>

我正在使用 "Flatpickr" 让用户更改 column/cell 中的日期，这就是结果：

<td><input id="69" class="delivery_date flatpickr flatpickr-input active" data-io="edit" data-date="2019-10-04" value="2019-10-04" style="color: " type="text" readonly="readonly"></td>

我为 "Datatables" 找到了这个插件，谁会搜索输入的 "Dom-text"。

/* 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;
    } );
  }

此插件没有任何反应。它不起作用，我没有收到任何错误消息。

还有另一个排序插件 "selects"，它很有用。

我错过了什么？

这是我希望能够做到的：
https://datatables.net/examples/plug-ins/dom_sort.html

这是我的 table:

Answer 1

您可以按照与此类似的方式使用 data-sort 根据 php-html.

的交货日期对您的列进行排序

<td data-sort='".strtotime($row['delivery_date'])."' data-filter='".$row['delivery_date']."'>
    <input id='".$row['id']."' class='delivery_date ".$flatpickr."' data-io='edit' data-date='".$row['delivery_date']."' value='".$row['delivery_date']."' style='color: ".$color."'/>
</td>

以上代码将使用 strtotime($row['delivery_date']) 生成的时间戳对列进行排序。

同样，您可以使用 data-filter 进行上述指定的搜索。

如果您更新输入中的日期，旧值将被考虑用于排序和筛选。您将不得不进一步检查如何更新这些值。（或尝试搜索类似的问题）

如何使用 jquery 数据表对输入值进行排序

How to sort input values with jquery datatables

jquery

datatables

flatpickr