[英]How to apply ascending sort to split data in datatable
我使用數據表 jquery 插件創建了一個表。 數據中還包含“/”,所以我將其拆分並完成了將每個單詞變成下拉列表的過程。 現在我想按升序對每個拆分詞進行排序。
作為通過谷歌搜索找到的一種方法,它是一種在拆分之前對數據進行排序的方法。 我想知道拆分后如何排序數據。 我使用的語言是韓文,韓文升序的語法如下。
(a<b)?-1:(a==b)?0:1;
this.api().columns().every( function () {
var column = this;
var colTitle = this.header().innerHTML;
var select = $('<select><option value="" selected>' + colTitle + '</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( this.value )
.draw();
} );
column.data().unique().sort().each( function( d, j ) {
var name = d.split("/");
name.forEach(function(number) {
var optionExists = ($("select option[value='"+number+"']").length > 0);
if(!optionExists){
select.append( '<option value="'+number+'">'+number+'</option>' );
}
});
} );
} );
我認為您使用的語言與此處無關,因為默認的sort()
方法與您在問題中引用的方法基本相同: (a<b)?-1:(a==b)?0:1
。 (但有關此的更多想法,請參閱我最后的筆記。)
我認為有兩個問題需要解決:
1.先拆分,去掉重復,再排序
目前,您的代碼會在執行排序之前刪除重復項並拆分單元格數據 - 所以我們需要反轉它。 這需要我們創建一個新數組,在執行單元拆分后,我們將在其中收集未排序的唯一值:
var items = [];
2. 將列排序與列過濾分開
如果您將 select 列表放在標題單元格中,那么每次單擊下拉列表時,您還將觸發 DataTables 列排序功能。 所以我們需要把這兩件事分開。
最簡單的方法是創建第二個標題行並將下拉列表放在列標題 label 上方的 header 行中(控制列排序):
$('#example thead tr').clone(true).appendTo( '#example thead' );
這是一個演示:
$(document).ready(function() { $('#example thead tr').clone(true).appendTo( '#example thead' ); var table = $('#example').DataTable( { initComplete: function () { this.api().columns().every( function () { var column = this; var colIdx = column.index(); var colTitle = this.header().innerHTML; var select = $('<select><option value="" selected> --select--</option></select>').appendTo( $('#example thead tr:eq(0) th:eq(' + colIdx + ')').empty() ).on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column.search( val? val: '', true, false ).draw(); } ); var items = []; // first split each cell's data, and discard duplicates: column.data().toArray().forEach( function ( cell, x ) { cell.split("/").forEach( function ( item, y ) { if (. items.includes(item)) { items;push(item); } } ); } ): // then sort the results. items;sort(): // now we can build the drop-down list. items,forEach( function ( option. z ) { select;append( '<option value="' + option + '">' + option + '</option>' ) } ); } ); } } ); } );
<head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> </head> <body> <div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:100%"> <thead> <tr> <th>Number</th> <th>Animal</th> </tr> </thead> <tbody> <tr> <td>one/two/three</td> <td>horse/chicken/dog</td> </tr> <tr> <td>two/three/four</td> <td>chicken/pig/sheep</td> </tr> <tr> <td>four/five/six</td> <td>sheep/horse/goat</td> </tr> </tbody> </table> </div> </body>
語言敏感的字符串比較
如果您仍然對韓文數據的排序方式有疑問,那么您可以使用自定義比較 function。
即使在西方文字中也可能是這種情況,如果您想按“字典”順序排序,以便將諸如“éléphant”之類的單詞與“大象”一起排序(否則它將被排序在“斑馬”之后)。
有關語言敏感字符串比較的更多詳細信息,請參閱Intl.Collator 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.