javascript - 如何应用升序排序来拆分数据表中的数据
问题描述
我使用 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. 将列排序与列过滤分开
如果将选择列表放在标题单元格中,那么每次单击下拉列表时,您还将触发 DataTables 列排序功能。所以我们需要把这两件事分开。
最简单的方法是创建第二个标题行并将下拉列表放在列标题标签上方的标题行中(控制列排序):
$('#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>
语言敏感的字符串比较
如果您仍然对韩文数据的排序方式有疑问,那么您可以使用自定义比较功能。
即使在西方文字中也可能是这种情况,如果您想按“字典”顺序排序,以便将诸如“éléphant”之类的单词与“大象”一起排序(否则它将被排序在“斑马”之后)。
有关语言敏感字符串比较的更多详细信息,请参阅Intl.Collator 。
推荐阅读
- kubernetes - 如何在 Kubernetes 中恢复已删除的入口?
- python - 使用单纯形算法的 2D 光纤对准
- audio - 如何在浏览器中呈现流式音频块?
- reporting-services - Microsoft Kerberos 配置管理器未列出 SSRS 实例
- xaml - Xamarin StackLayout 水平和垂直
- javascript - 尝试在 next.js 项目上安装材料 ui 时出现“元素类型无效”
- python - 如何使用 Python 创建树形图,其中总大小是所有行的计数
- swift - Swift scrollToItem 工作很奇怪
- android - Logback:在工作资料中无法创建日志文件
- python - 无法生成列表以显示列表中的任何匹配项