Sorting DataTable by recent date Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Sorting DataTable by recent date without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a table and it is sorted by the old date. I just want to make its default sorting by the recent date (1st column). the code is:

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

and it looks like: enter image description here

I tried many solutions on the net but all didn’t work!

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

and this

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

and this too

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

and this one

> <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>

any suggestions?

Answer

I created an example off of the data provided in your screenshot, except in my example all values other than the Dates are the same so I can demonstrate how it works.

You were pretty close, you just needed to include the following DataTables option

DataTables order option

Here:

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>
We are here to answer your question about Sorting DataTable by recent date - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji