Sorting in DataTables plugin in jquery is not working

Question

My HTML code :

<table id="sample">
<thead>
       <tr>
            <th>
            </th>

            <th style="text-align:center">
                Date
            </th>

            <th style="text-align:center">
                Type
            </th>

            <th style="text-align:center">
                Narration
            </th>

            <th>
                    Person 1 Salary
                    <div>
                    </div>
            </th>
            <th>
                <div>
                    Person 2  Salary
                </div>
            </th>

            <th>
                <div>
                    Person 3 Salary
                </div>
            </th>

            <th class="bold text-center">
                Total Amount
            </th>
        </tr>
</thead>

<tbody>
    <tr>
        <td>
            <button style="height:25px;width:80px" class="btn btn-primary">
                Delete
            </button>
        </td>

        <td>
            <input class="form-control" type="text">
        </td>
        <td>
            <div>
                <select class="form-control">
                    <option selected="selected" value="ddadd"></option>
                    <option value="asdasd">adasa</option>
                    <option value="sas">adass</option>
                </select>
            </div>
        </td>

        <td>
            <input class="form-control">
        </td>

        <td>
            <div>
                <input class="form-control">
            </div>
            <input type="hidden" value="325">
            <input type="hidden" value="46408">
            <input type="hidden" value="22615">
        </td>
        <td>
            <div>
                <input class="form-control"type="text" value="0">
            </div>
            <input type="hidden" value="326">
            <input type="hidden" value="46409">
            <input type="hidden" value="22615">
        </td>
        <td>
            <div>
                <input class="form-control"type="text" value="7500">
            </div>
            <inputtype="hidden" value="327">
            <inputtype="hidden" value="46410">
            <inputtype="hidden" value="22615">
        </td>
        <inputtype="hidden" value="2920bb4d-101d-46d5-89a2-8aaaebfd124c">
        <inputtype="hidden" value="22615">
        <inputtype="hidden" value="True">

        <td>
            <div>
                <input id="txtTotalAmount"type="text" value="7500">
            </div>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td></td>

        <td style="text-align: left">
            <label class="control-label">Total</label>
        </td>
        <td></td>
        <td></td>
        <td style="text-align: right; padding: 3px 0px;">
            <div style="width:84%">
                <label class="control-label">
                    0
                </label>
            </div>
        </td>
        <td style="text-align: right; padding: 3px 0px;">
            <div style="width:84%">
                <label class="control-label">
                    0
                </label>
            </div>
        </td>
        <td style="text-align: right; padding: 3px 0px;">
            <div style="width:84%">
                <label class="control-label">
                    0
                </label>
            </div>
        </td>
        <td style="text-align: right; padding: 3px 0px;">
            <div style="width:84%">
                <label class="control-label">
                    0
                </label>
            </div>
        </td>
    </tr>
</tfoot>

My JS Code:

//Extending the method in order to sort the columns having text box field

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
var aData = [];
$('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
aData.push(this.value);
});
return aData;
}

// Loading my table as DataTable with only one column as sortable
$('#sample').DataTable({
"paging": false,
"searching": false,
"order": [[1, "desc"]],
'columns': [
                null, 
                { 'sSortDataType': 'dom-text', 'sType': 'date' },
                null,
                null,
                null,
                null,
                null
            ]
});                                           });

What I tried :

I tried to sort the " Date " column which has a text field inside it.

Error I am getting :

---

Cannot read property 'mData' of undefined

---

What I need :

I need Date column to be sorted that has input text field as rows.

Please help me to get rid off this. I couldn't find where I have done the mistake.

Answer 1

Please try this JS CODE

 $.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
  var aData = [];
  $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
  aData.push(this.value);
});
  return aData;
}


$.fn.dataTable.moment = function ( format, locale ) {
  var types = $.fn.dataTable.ext.type;

  // Add type detection
  types.detect.unshift( function ( d ) {
    return moment( d, format, locale, true ).isValid() ?
    'moment-'+format :
    null;
  }); 

  // Add sorting method - use an integer for the sorting
  types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
    return moment( d, format, locale, true ).unix();
  };
};

$.fn.dataTable.moment('DD-MMM-YYYY')

$('#sample').DataTable({
  "paging": false,
  "searching": false,
  "order": [[1, "desc"]],
  "columnDefs": [ {"targets": [0], "type": "moment-DD-MMM-YYYY"}],
  'columns': [
            null, 
            { 'sSortDataType': 'dom-text', 'sType': 'date' },
            null,
            null,
            null,
            null,
            null
        ]
 });     

This function will sort your date format ie ("DD-MMM-YYYY") Please try this out. You can also try below links -

• https://stackoverflow.com/a/12003401/5129663

• https://www.datatables.net/plug-ins/sorting/date-uk