DataTables 对没有空格和字符串的数字进行排序

Question

在摆弄我的 table 布局后我放弃了，我正在寻找最新且优雅的方式来对具有这些数字的 table 布局进行排序。

我尝试了这个流行的解决方案。

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  "formatted_numbers-pre": function ( a ) {
    a = (a===" ") ? 0 : a.replace( /[^\d\-\.]/g, "" );
    return parseFloat( a );
  },

  "formatted_numbers-asc": function ( a, b ) {
    return a - b;
  },

  "formatted_numbers-desc": function ( a, b ) {
    return b - a;
  }
});


jQuery(document).ready(function() {
    jQuery('#mieszkaniaList').DataTable({
        responsive: true,
        "columnDefs": [
            { "type": "formatted_numbers", "targets": '_all'},
         ],
        "language": {
            "decimal": ",",
            "thousands": " ",
            "lengthMenu": "Pokaż _MENU_ mieszkań na stronę",
            "zeroRecords": "Niestety dla tego zakresu nie znaleźliśmy pasujących mieszkań ...",
            "info": "Strona _PAGE_ z _PAGES_",
            "infoEmpty": "Niestety brak mieszkań...",
            "processing":     "Przygotowujemy mieszkania...",
            "search": "Szukaj",
            "paginate": {
                "first":      "Pierwsza",
                "last":       "Ostatnia",
                "next":       "Następna",
                "previous":   "Poprzednia"
            },
            "infoFiltered": "(z _MAX_ mieszkań)"
        }
    });
});

Nr	Area	level	nr2	Price	Price per m2
01A	10 m2	1	1	502 200 PLN	7 200 PLN za m2
02A	20 m2	2	2	1 502 200 PLN	10 200 PLN za m2
03A	90 m2	3	3	2 502 200 PLN	15 200 PLN za m2
04A	120 m2	4	4	202 200 PLN	5 200 PLN za m2

Answer 1

你的方法看起来很接近我，但我可以提出一些修改建议：

在您的情况下，您只需要 -pre 函数 - 您不需要 -asc 和 -desc 函数。事实上，documentation 中有一条注释指出您不能将 -pre 的用法与其他两个函数结合使用：

Note that in DataTables 1.10 a pre-formatter cannot be used with custom -asc and -desc methods - to use custom ordering functions you cannot apply a pre-formatter. This limitation will be addressed in the next major version of DataTables.

如果您使用 -pre 将数字加文本转换为纯数字值，则排序将自动使用纯数字值 - 数据将自动作为数字处理，而不是文本.

您需要处理这样一个事实，即您的某些数据包含带数字的字符串（“m2”）。处理这些问题的一个非常简单的方法是在执行正则表达式替换之前将所有出现的 m2 替换为空。

这是一个可运行的演示：

$(document).ready(function() {

  $.fn.dataTable.ext.type.order['formatted_numbers-pre'] = function ( a ) {
    a = a.replaceAll("m2", "");
    a = (a===" ") ? 0 : a.replace( /[^\d\-\.]/g, "" );
    console.log( a ); // for debugging only
    return parseFloat( a );
  };

  var table = $('#example').DataTable( {
    "columnDefs": [
      { "type": "formatted_numbers", "targets": '_all'},
    ]
  } );

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.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>Nr</th>
                <th>Area</th>
                <th>Level</th>
                <th>nr2</th>
                <th>Price</th>
                <th>Price per m2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01A</td>
                <td>10 m2</td>
                <td>1</td>
                <td>1</td>
                <td>502 200 PLN</td>
                <td>7 200 PLN za m2</td>
            </tr>
            <tr>
                <td>02A</td>
                <td>20 m2</td>
                <td>2</td>
                <td>2</td>
                <td>1 502 200 PLN</td>
                <td>10 200 PLN za m2</td>
            </tr>
        </tbody>
    </table>

</div>


</body>
</html>

上面代码中有一个logging语句，所以可以看到-pre函数产生了什么数据。

DataTables 对没有空格和字符串的数字进行排序

DataTables sorts numbers without spaces and strings

sorting

datatable