DataTables對沒有空格和字串的數字進行排序-有解無憂

在擺弄我的表格布局后，我放棄了，我正在尋找最新且優雅的方式來使用此類數字對表格布局進行排序。

我嘗試了這個流行的解決方案。

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ń)"
        }
    });
});

編號	區域	等級	nr2	價錢	每平方米價格
01A	10 平方米	1	1	502 200 波蘭茲羅提	7 200 PLN za m2
02A	20 平方米	2	2	1 502 200 波蘭茲羅提	10 200 PLN za m2
03A	90 平方米	3	3	2 502 200 波蘭茲羅提	15 200 PLN za m2
04A	120 平方米	4	4	202 200 波蘭茲羅提	5 200 PLN za m2

uj5u.com熱心網友回復：

你的方法看起來很接近我，但我可以建議一些改變：

在您的情況下，您只需要該-pre功能 - 您不需要-asc和-desc功能。事實上，檔案中有一條說明，說明您不能將-pre與其他兩個功能結合使用：

請注意，在 DataTables 1.10 中，預格式化程式不能與自定義 -asc 和 -desc 方法一起使用 - 要使用自定義排序函式，您不能應用預格式化程式。此限制將在 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>

上面代碼中有一個日志陳述句，可以看到-pre函式生成了什么資料。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/323889.html

標籤：排序数据表

上一篇：是否可以在不按字母、字母數字或日期順序對資料進行排序的情況下對MicrosoftWORD表中的行進行排序？

下一篇：當我們不知道大小時定義空的numpy陣列