[英]Sorting in DataTables plugin in jquery is not working
我的 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”
我需要的 :
我需要對具有輸入文本字段作為行的日期列進行排序。
請幫我擺脫這個。 我找不到我在哪里做錯了。
請試試這個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
]
});
此功能將對您的日期格式進行排序,即 ("DD-MMM-YYYY") 請試試這個。 您也可以嘗試以下鏈接 -
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.