根據輸入的最新資料對兩列進行排序-有解無憂

我有一個問題我有一個表，我想按日期排序，以便最新資料排在第一位，另一列是數字，我也想排序，以便空欄位低于非空欄位，如果我是用“順序”來做的，但是當我這樣做時，它會破壞日期的降序，有沒有一種方法可以在不破壞日期順序的情況下進行排序。
謝謝您的幫助

$(document).ready(function(){
    var table = $('#servicios').DataTable({
      processing: true,
      serverSider: true,
       "order": [[ 2, 'desc' ],[ 3, 'desc' ]],
      "pageLength": 50,
      "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]]
    });
 });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <title>JS Bin</title>
</head>
<body>
  <span><strong>STATE</strong></span>
  <select data-column="1" class="form-control filter-select">
        <option value="">All</option>
        <option value="&#10003;">&#10003;</option>
        <option value="&#9866;">&#9866;</option>
   </select>
<table id="servicios" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>State</th>
                <th>Date</th>
                <th>salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>&#10003;</td>
                <td>2022-09-06</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>&#10003;</td>
                <td>2022-09-06</td>
                <td></td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>&#9866;</td>
                <td>2022-09-05</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>&#9866;</td>
                <td>2022-09-06</td>
                <td></td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>&#10003;</td>
                <td>2022-09-06</td>
                <td></td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>&#9866;</td>
                <td>2022-09-03</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>&#9866;</td>
                <td>2022-09-02</td>
                <td>S/ 124.00</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>&#9866;</td>
                <td>2022-09-01</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>&#9866;</td>
                <td>2022-09-01</td>
                <td></td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>&#9866;</td>
                <td>2022-09-01</td>
                <td></td>
            </tr>
        </tbody> 
    </table>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.11.3/api/sum().js"></script>
</body>
</html>

如您所見，如果我按數量訂購，日期的順序就會被破壞。根據輸入的最新資料對兩列進行排序

uj5u.com熱心網友回復：

我可能沒有完全理解這個問題，但感謝您的更新 - 這是我的方法：

向表中添加一個新列。這對用戶是不可見的。1如果列中有值，它將包含 a salary。否則它將包含一個0.
添加一個新orderData選項，表示每當用戶對Date列進行排序時，我們實際上將在上面 (1) 中的新列上排序，然后在日期列上排序。

以下是 (1) 和 (2) 的實作方式：

columnDefs: [ 
  { 
    targets: [ 4 ],
    visible: false,  
    render: function ( data, type, row, meta ) {
      return row[3] ? 1 : 0;
    }
  },
  {
    targets: [ 2 ],
    orderData: [ 4, 2 ]
  }
]

這是一個可運行的演示：

$(document).ready(function(){
    var table = $('#servicios').DataTable({
      processing: true,
       "order": [[ 2, 'desc' ],[ 3, 'desc' ]],
      "pageLength": 50,
      "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
  
      columnDefs: [ 
        { 
          targets: [ 4 ],
          visible: false,  
          render: function ( data, type, row, meta ) {
            return row[3] ? 1 : 0;
          }
        },
        {
          targets: [ 2 ],
          orderData: [ 4, 2 ]
        }
      ]
      
    });
 });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.11.3/api/sum().js"></script>
  <title>JS Bin</title>
</head>
<body>
  <span><strong>STATE</strong></span>
  <select data-column="1" class="form-control filter-select">
        <option value="">All</option>
        <option value="&#10003;">&#10003;</option>
        <option value="&#9866;">&#9866;</option>
   </select>
<table id="servicios" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>State</th>
                <th>Date</th>
                <th>salary</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>&#10003;</td>
                <td>2022-09-06</td>
                <td>$14.00</td>
                <td></td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>&#10003;</td>
                <td>2022-09-06</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>&#9866;</td>
                <td>2022-09-05</td>
                <td>$124.00</td>
                <td></td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>&#9866;</td>
                <td>2022-09-06</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>&#10003;</td>
                <td>2022-09-06</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>&#9866;</td>
                <td>2022-09-03</td>
                <td>$14.00</td>
                <td></td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>&#9866;</td>
                <td>2022-09-02</td>
                <td>S124.00</td>
                <td></td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>&#9866;</td>
                <td>2022-09-02</td>
                <td>$14.00</td>
                <td></td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>&#9866;</td>
                <td>2022-09-01</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>&#9866;</td>
                <td>2022-09-01</td>
                <td></td>
                <td></td>
            </tr>
        </tbody> 
    </table>

</body>
</html>

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

標籤：javascript jQuery 数据表

上一篇：HTML核心標簽和屬性

下一篇：嘗試在同一檔案中第二次使用存根時包裝已包裝的警報