jbaysolutions / vue2-bootstrap-table

A sortable and searchable table, as a Vue2 component, using bootstrap styling.
118 stars 39 forks source link

Quick and Dirty Solution to sort by Date #31

Open pepperbilly opened 4 years ago

pepperbilly commented 4 years ago

Hello I Find a quick and Dirty Solution to sort the Table by Date:

1 Safe your Date in a Sortable Format (for example unix Timestamp or what Ever) in my Case i used the following format: YYYY-MM-DD wich is as well sortable as an integer.

2 Call A Renderfunction for the Date Column renderfunction: DateRenderFunction

3 Build Your Renderfunction

var DateRenderFunction = function (colname, entry){
        var res = entry['datum'].split("-");
        var newDate = res[2]+'.'+res[1]+'.'+res[0];

        //HERE IS THE TRICK:
        //patch the Original (YYYY-MM-DD sortable) Date in front of the New (DD.MM.YY)
        //and Wrap it with a <p> tag which is invisible by adding display:none
        //it will be read by the sort function even though it is invisible for the html

        var patchDate = '<p style="visibility:hidden;display:none">'+entry['datum']+'</p>'+ newDate;
        return patchDate;
    };