DataTables 默認按數字排序

Question

我正在從后端提取一些數據，並將它們顯示在 DataTables 表中。 問題是它沒有根據最后的附加數字對其行進行排序，這就是我想要做的。 我正在粘貼問題的屏幕截圖。 任何幫助表示贊賞。

編輯：這樣我將 JSON 提供給 DataTables

$finalTableSQL = "select * from players_data where store = $store";
$finalTableResult = $mysqli->query($finalTableSQL);
$rows = array();
while ($row = $finalTableResult->fetch_array(MYSQLI_ASSOC)) {
    $rows[] = $row;
}

$returnToCashier = [];
$returnToCashier["data"] = [];
foreach ($rows as $finalTableRows) {
    $playerID = (int) $finalTableRows["user_id"];
    $playerEmail = $userRow["email"];
    $lastintype = (int) $finalTableRows["last_in_type"];
    $lastIN = (float) $finalTableRows["last_in"] / 100;

    if ($lastintype == 0) {
        $intype = "Cash";
    } else if ($lastintype == 1) {
        $intype = "Privilege";
    } else {
        $intype = "Bonus";
    }

    $canCashOut = (int) $finalTableRows["can_cash_out"];

    if ($canCashOut == 0) {
        $credits = "<font style='color: red;'>" . ((float) $finalTableRows["credits"] / 100) . " €</font>";
    } else {
        $credits = ((float) $finalTableRows["credits"] / 100) . " €";
    }

    $playeruserSQL = "select * from directus_users where id = $playerID";
    $playeruserResult = $mysqli->query($playeruserSQL);
    $playeruserRow = $playeruserResult->fetch_array(MYSQLI_ASSOC);

    array_push($returnToCashier["data"], [
        "username" => str_replace("@mail.com", "", $playeruserRow["email"]),
        "credits" => $credits,
        "lastintype" => $lastIN . " € " . $intype,
        "lastplayed" => $finalTableRows["last_played"],
        "playerid" => $playerID,
    ]);
}

echo json_encode($returnToCashier);

通過這種方式，我向前端展示了 JSON：

var table = $('#playerstable').DataTable({
    "fnDrawCallback": function(data) {
        $(".paginate_button > a").on("focus", function() {
            $(this).blur();
        });
    },
    "ajax": "/frontend/cashierusers.php?token=" + sessionStorage.getItem('JWT'),
    "columns": [{
            "data": "username"
        },
        {
            "data": "credits"
        },
        {
            "data": "lastintype"
        },
        {
            "data": "lastplayed"
        },
        {
            "data": "playerid"
        },
    ],
    "autoWidth": false,
    rowReorder: false,
    responsive: true,
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Search..."
    }
});

Answer 1

要按數字排序，您需columnDefs: [{targets: 1, type: 'num'}],

Answer 2

您可以結合以下技術：

1 - 創建一個僅包含每個值的數字部分的隱藏列。

2 - 使用orderData選項允許您的可見列按隱藏列中的數據排序。

在我的測試用例中，我從 JavaScript 變量加載我的數據，而不是從 ajax URL 加載我的數據：但除此之外，該方法適用於您：

我的測試表：

<table id="example" class="display dataTable cell-border" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>hidden column</th>
        </tr>
    </thead>
</table>

數據表：

  var dataSet = [
    {"playerid": "rodplayer25"},
    {"playerid": "rodplayer10"},
    {"playerid": "rodplayer2"},
    {"playerid": "rodplayer1"}
  ];

  $(document).ready(function() {

    var table = $('#example').DataTable( {
      "data": dataSet,
      "columnDefs": [
        {
          "targets": [ 0 ],
          // use the data in the 2nd (hidden) column for ordering this column:
          "orderData": [ 1 ],
          "data": "playerid"
        },
        {
          "targets": [ 1 ],
          "visible": false,
          "data": function ( row, type, val, meta ) {
            // populate this column with only the trailing number:
            return parseInt(row.playerid.split(/([0-9]+)/)[1]);
          }
        }
      ]
    } );

  } );

這將顯示您的原始“rodplayer”數據值。 但是當您對該列進行排序時，它將使用從每個字符串末尾提取的數字數據。

我使用的正則表達式 ( /([0-9]+)/ ) 假設數字數據總是出現在每個值的末尾。 因此，只要您的數據從不偏離這種格式，正則表達式就會按預期工作。