Search code examples
javascriptasp.net-mvcsortingdatatablesadminlte

AdminLTE v2.3.8. Datatable DateTime column sort


Consider this code (I use razor ASP.NET C# but it doesn't really matter). I'am able to sort all column but the last one is a datetime which is sorted as string. I just want to know if it is possible to have a sorting datetime column with AdminLTE datatables, with or without (better) adding plugins.

      <div class="table-responsive">
          <table id="tableClienti" class="table table-bordered table-striped table-hover">
              <thead>
                  <tr>
                      <th>Zona</th>
                      <th>Classe</th>
                      <th>Rag Soc</th>
                      <th>Indirizzo</th>
                      <th>Email/Telefono</th>
                      <th>Contatto</th>
                      <th>Email/Telefono</th>
                      <th>Ultimo Pass.</th>

                  </tr>
              </thead>
              <tbody>
                  @{

                      foreach (var r in Model)
                      {
                          <tr>
                              <td>@r.Zona</td>
                              <td>@r.ClasseCliente</td>
                              <td>@r.RagioneSociale</td>
                              <td><b>@r.Citta @r.CAP</b><br /> @r.Indirizzo</td>
                              <td>@r.Email<br /> @r.Telefono</td>
                              <td><b>@r.NomeContatto<br /> @r.CognomeContatto</b></td>
                              <td>@r.EmailContatto<br /> @r.TelefonoContatto</td>
                              <td>@r.DataUltimoPassaggio</td>
                          </tr>
                      }
                  }


              </tbody>
          </table>
      </div>

  $(function () {
        var table = $("#tableClienti").DataTable({
            paging: false,
            "sDom": '<"top"i>rt<"bottom"><"clear">',
            "scrollX": true,
            "scrollY": "45vh",
            "bSort": true
            ]
        });


Solution

  • If you stumble upon this question, I solved after having issues using data-order.

    This link shows how data-order works but this comment found on same page was the key for me:

    Its important to notethat the data-* attributes with search() will only work if you use this on every COL!!! You can not mix it like:

    < tr>< td>Value1< /td>< /tr> < tr>< td data-search='Value 2 XYZ'>Value2< /td>< /tr> It seems the Plugin-Code always check the first row and then use this value for all search operations. Maybe for the future would be very cool if you can mix it ;):

    Best Regards Tom

    Previously, I tried to add data-order to < td> only if the "DateTime variable" was not null. Thanks to this comment I set data-order = "DateTime variable".Ticks when "DateTime variable" is not null and data-order = 0 when "DateTime variable" is null.

    So, I changed this piece of code

    <td>@r.DataUltimoPassaggio</td>
    

    in this way

    @{ 
       DateTime data; 
       if (DateTime.TryParse(r.DataUltimoPassaggio.ToString(), out data)) 
       { 
          <td data-order="@(data.Ticks)">@(data.ToString())</td> 
       } 
       else 
       { 
          <td data-order="0"></td> 
       } 
    }