Custom Date Sort with jQuery Tablesorter and Bootstrap Table Plugin

Hints HOWTOs Javascript

In the past week I have dealt with two different needs to sort a table date column (using a custom date format) using a JS plugin jQuery Tablesorter 2.0 and Bootstrap Table.

If you use custom date formats – the default sort will not always work. In my case – it was sorting the dates by month name alphabetically and not by date order. Here is how you can use both plugins to sort by date order:

Example date format: Jan 28-Jan 31 (date for this example was a span of dates – in which I wanted to sort by the starting date)

Custom date sort solution in two steps for jQuery Tablesorter and Bootstrap Table:

jQuery Tablesorter

  1. Add data to the table header:
    <th data-sorter="shortDate" data-date-format="yyyymmdd">Date</th>
  2. Add a hidden span before your actual date in the data that then matches the format specificed above:
    <span style="display:none"><?php echo date( "Ymd", strtotime($date) ));?></span> Jan 28-Jan 31

Very similar to the jQuery Tablesorter solution:

Bootstrap Table

  1. Add data to the table header:
    <th data-field="created" data-sortable="true">Created</th>
  2. Add a hidden span before your actual date in the data that then matches the format specificed above:
    <span style="display:none"><?php echo date( "Ymd", strtotime($date) ));?></span> Jan 28-Jan 31

Now you can easily sort any date format using these two plugins so you can format the date however you want and still be able to sort by date on that column.

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Apple Hints

What Can Siri Do For Me?

If you are like me – you have an Apple iPhone and the thought of using Siri sounds awesome but after a few smart comments trying to get her to say something funny back (because you are not sure what all you can really say/get out of Siri) – you forget about her and move […]

Music

Music Pick 2 for Mid March 2015

Kryder & The Wulf – Good Vibes (Original Mix) just made it to my spring running mix. Grab your copy on Beatport HERE: http://btprt.dj/1au0fge