按最近日期排序 DataTable

Question

我有一个 table，它按旧日期排序。我只想按最近的日期（第一列）进行默认排序。代码是：

<script>
    $(document).ready( function () {
          $('#table_id').DataTable({
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }
      });
});
</script>

看起来像：

我在网上尝试了很多解决方案，但都没有用！

<script>
    $(document).ready( function () {
          $('#table_id').DataTable({
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }
      }).asSorting([[0, "desc"]]);
});
</script>

还有这个

<script>
    $(document).ready( function () {
          $('#table_id').DataTable({
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }
      }).fnSort([[0, "acs"]]);
});
</script>

还有这个

<script>
    $(document).ready( function () {
          $('#table_id').DataTable({
    "order": [[ 0, "desc" ]]
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }
      });
});
</script>

还有这个

> <script>
>     $(document).ready( function () {
>           $('#table_id').DataTable({
>             "aoColumnDefs": [
>       { "asSorting": [ "asc" ], "aTargets": [ 0 ] }
>     ]
>     dom: 'B<"clear">lfrtip',
>     buttons: {
>         name: 'primary',
>         buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
>         }
>       }); }); </script>

有什么建议吗？

Answer 1

我根据您的屏幕截图中提供的数据创建了一个示例，除了在我的示例中，除日期之外的所有值都相同，因此我可以演示它是如何工作的。

您已经很接近了，您只需要包括以下 DataTables 选项

DataTables order option

这里：

var data = [
{
    "DateofTest": "2006-10-26",
  "OIL": "17.79",
  "WATER": "30.7",
  "GAS": "15380",
  "Gas-Lift": "5330"
},
{
    "DateofTest": "2007-05-26",
  "OIL": "17.79",
  "WATER": "30.7",
  "GAS": "15380",
  "Gas-Lift": "5330"
},
{
    "DateofTest": "2008-03-26",
  "OIL": "17.79",
  "WATER": "30.7",
  "GAS": "15380",
  "Gas-Lift": "5330"
}
];

 $(document).ready( function () {
    $('#example').DataTable({
    data: data,
    "columns" : [
    {"data":"DateofTest"},
    {"data":"OIL"},
    {"data":"WATER"},
    {"data":"GAS"},
    {"data":"Gas-Lift"}
    ],
    dom: 'B<"clear">lfrtip',
    
    // 0 is the first column it is ordering by (Date of Test)
    // 'desc' (descending) is ordering from most recent date to the oldest dates on bottom
    //'asc' (ascending) is ordering from the oldest date to the most recent on bottom
    order: [0, 'desc'],
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }
      });
});

td {
  text-align: center;
}

<!DOCTYPE html>
  <html>
    <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.11.0/b-2.0.0/b-colvis-2.0.0/b-html5-2.0.0/b-print-2.0.0/date-1.1.1/r-2.2.9/rg-1.1.3/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.11.0/b-2.0.0/b-colvis-2.0.0/b-html5-2.0.0/b-print-2.0.0/date-1.1.1/r-2.2.9/rg-1.1.3/datatables.min.js"></script>


    </head>
    <body>
      <div class="container">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Date of Test</th>
                            <th>OIL (m3/d)</th>
                            <th>WATER (m3/d)</th>
                            <th>GAS (m3/d)</th>
                            <th>Gas Lift (m3/d)</th>
                        </tr>
                    </thead>
                </table>
      </div>
    </body>
  </html>

按最近日期排序 DataTable

Sorting DataTable by recent date

html

javascript

django

datatable

html-table