在 jquery 中的 DataTables 插件中排序不起作用

Posted 2023-05-07

【中文标题】在 jquery 中的 DataTables 插件中排序不起作用

【英文标题】：Sorting in DataTables plugin in jquery is not working

【发布时间】：2016-08-31 01:10:47

【问题描述】：

我的 HTML 代码：

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

我的 JS 代码：

//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
            ]
);                                           );

我尝试了什么：

我尝试对其中包含文本字段的“日期”列进行排序。

我得到的错误：

---

无法读取未定义的属性“mData”

---

我需要什么：

我需要对 Date 列进行排序，该列将输入文本字段作为行。

请帮我摆脱这个。我找不到我做错的地方。

【参考方案1】：

请试试这个JS代码

 $.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
        ]
 );     

此功能将对您的日期格式进行排序，即（“DD-MMM-YYYY”） 请试试这个。您也可以尝试以下链接 -

https://***.com/a/12003401/5129663

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

【讨论】：

谢谢哥们。我找到了解决方案。我将其发布为答案。