How to sort input values with jquery datatables

Question

I'm trying to sort the dates in my table with Jquery "Datatables".

This is html/php i wrote:

<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>

I'm using "Flatpickr" to let the user change the date in a column/cell, and this is what it comes to:

<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>

I found this plugin for "Datatables", who will search the "Dom-text" of the input.

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

Nothing happens with this plugin. It doesn't work and i get no error messages.

There is another plugin for sorting "selects" and it works as a charm.

What am i missing?

This is what i'd like to be able to do:
https://datatables.net/examples/plug-ins/dom_sort.html

This is how it looks in my table:

Mehravish Temkar Mehravish Temkar · Accepted Answer · 2019-09-20T06:39:54

You can use data-sort in a way similar to this to sort your column according to delivery date for 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>

The above code will sort the column with timestamp generated by strtotime($row['delivery_date']).

Similarly, you can use data-filter for searching as specified above.

In case you are updating the date within the input, the old values will be considered for sort and filter. You will have to check further on how to update those values.(Dynamic sorting in jquery DataTables or try searching for similar questions)

How to sort input values with jquery datatables

1 Answers