如何在数据表中使用国际字符进行排序

How to make sort with International characters in dataTable

我正在努力使我的排序与国际字符一起工作。但是当我尝试排序时搞砸了,顺序不正确。下面是我的代码:

function character_substitute(string) {
    var first_char = string.replace( /<.*?>/g, "" ).toLowerCase().charAt(0);
    var chars = /[šđžčć]/g;
    
    if (first_char.match(chars)) {
        if (first_char == "š") { first_char = first_char.replace("š", "s"); return first_char; }
        if (first_char == "ž") { first_char = first_char.replace("ž", "z"); return first_char; }
        if (first_char == "č") { first_char = first_char.replace("č", "c"); return first_char; }
        if (first_char == "ć") { first_char = first_char.replace("ć", "c"); return first_char; }
        if (first_char == "đ") { first_char = first_char.replace("đ", "d"); return first_char; }
    }
    
    return first_char;
}

jQuery.fn.dataTableExt.oSort['balkan_string-asc']  = function(a,b) {
    x = character_substitute(a);
    y = character_substitute(b);
    
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['balkan_string-desc'] = function(a,b) {
    x = character_substitute(a);
    y = character_substitute(b);
    
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};



$(function() {
    $("#example").DataTable({
        columns: [{
            type: 'balkan_string',
            targets: 0
        }]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" >


<table id="example">
    <thead>
        <tr>
            <th>String</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaa</td>
        </tr>
        <tr>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>cccc</td>
        </tr>
        <tr>
            <td>čččč</td>
        </tr>
        <tr>
            <td>ćććć</td>
        </tr>
        <tr>
            <td>dddd</td>
        </tr>
       
        
        
       
    </tbody>

</table>

这是您尝试排序时的输出:

dddd
cccc
čččč
ćććć
bbbb
aaaa

顺序应该是这样的:

dddd
ćććć
čččč
cccc
bbbb
aaaa

有办法解决吗?我没有找到解决问题的方法,所以我尝试自己写。

有人可以帮我解决这个问题吗?

您可以通过在排序函数的主体中使用 localeCompare 来完成此操作。

对于升序排序:

return a.localeCompare(b,'pl');

对于降序排序:

return b.localeCompare(a,'pl');

以下是代码上下文中的更改:

function character_substitute(string) {
    var first_char = string.replace( /<.*?>/g, "" ).toLowerCase().charAt(0);
    var chars = /[šđžčć]/g;
    
    if (first_char.match(chars)) {
        if (first_char == "š") { first_char = first_char.replace("š", "s"); return first_char; }
        if (first_char == "ž") { first_char = first_char.replace("ž", "z"); return first_char; }
        if (first_char == "č") { first_char = first_char.replace("č", "c"); return first_char; }
        if (first_char == "ć") { first_char = first_char.replace("ć", "c"); return first_char; }
        if (first_char == "đ") { first_char = first_char.replace("đ", "d"); return first_char; }
    }
    
    return first_char;
}

jQuery.fn.dataTableExt.oSort['balkan_string-asc']  = function(a,b) {
  return a.localeCompare(b,'pl');
};

jQuery.fn.dataTableExt.oSort['balkan_string-desc'] = function(a,b) {
  return b.localeCompare(a,'pl');
};

$(function() {
    $("#example").DataTable({
        columns: [{
            type: 'balkan_string',
            targets: 0
        }]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" >

<table id="example">
    <thead>
        <tr>
            <th>String</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaa</td>
        </tr>
        <tr>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>cccc</td>
        </tr>
        <tr>
            <td>čččč</td>
        </tr>
        <tr>
            <td>ćććć</td>
        </tr>
        <tr>
            <td>dddd</td>
        </tr>       
    </tbody>
</table>

DataTables 有一个用于自然语言排序的插件(广义上是指基于字典的排序):

https://cdn.datatables.net/plug-ins/1.10.25/sorting/intl.js

以上文件包含使用说明,您也可以在这里阅读更多相关信息:

Locale based sorting

您可以按如下方式使用:

$(document).ready(function() {

  // the plug-in's function is auto-detected by DataTables:
  $.fn.dataTable.ext.order.intl('pl');

  var table = $('#example').DataTable( {
    "order": [[ 0, 'desc' ]] // initial sort order
  } );

} );
<!doctype html>
<html>
<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.25/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- include this plug-in: -->
  <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/intl.js"></script>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
        <tr>
            <th>String</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaa</td>
        </tr>
        <tr>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>cccc</td>
        </tr>
        <tr>
            <td>čččč</td>
        </tr>
        <tr>
            <td>ćććć</td>
        </tr>
        <tr>
            <td>dddd</td>
        </tr>
       
    </tbody>
    </table>

</div>

</body>
</html>

最终结果:

dddd
ćććć
čččč
cccc
bbbb
aaaa

一些重要说明:

在我的 JavaScript 中,我使用 pl 语言标记代码来使用波兰语语言环境。这是我的猜测,基于假设您使用的字母表同时包含 čć。如果我弄错了,我深表歉意! - 你当然可以使用你需要的任何语言环境(或语言环境数组)。