如何应用升序排序来拆分数据表中的数据

Question

我使用数据表 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>' );
                        }
                    });
            } );
        } );

Answer 1

我认为您使用的语言与此处无关，因为默认的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 。

如何应用升序排序来拆分数据表中的数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-02 01:14:00

如何应用升序排序来拆分数据表中的数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-02 01:14:00

解决方案1
0 已采纳 2021-06-02 01:14:00