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

How to apply ascending sort to split data in datatable

我使用数据table jquery 插件创建了一个table。 数据中还包含“/”，所以我将其拆分，完成了将每个词做成下拉列表的过程。 现在我想按升序对每个拆分词进行排序。

作为通过Googling找到的一种方法，它是一种在拆分之前对数据进行排序的方法。 我想知道拆分后如何按数据排序。我使用的语言是韩文，升序韩文的语法如下

(a 

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 列表放在标题单元格中，则每次单击 drop-down 时，您也会触发 DataTables 列排序功能。所以我们需要将这两件事分开。

最简单的方法是创建第二个标题行并将下拉列表放在列标题标签上方的 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>

Language-sensitive 字符串比较

如果您对韩文数据的排序方式仍有疑问，则可以使用自定义比较功能。

即使在西方文字中也可能是这种情况，如果您想按“字典”顺序排序，那么“éléphant”之类的词会排在“elephant”旁边（否则它会排在“zebra”之后").

有关 language-sensitive 字符串比较的更多详细信息，请参阅 Intl.Collator。