Question

How would I go about the implementation of a date picker into Tablesorter so that I can show a result between to dates 01/01/2001 - 01/01/2012?

I have been given the following question hence my query regarding the question above:

In HTML display a set of tabular data where the data contains dates. Implement a date picker that filters the tabular data. Where possible allow for the tabular data to be supplied via ajax or json feeds.

Answer 1

As I commented before, you can do this by simply using 2 jQuery UI datepickers – one for min date, another for max date – and filtering the dates.

I’ve made an extremely simple example, Take a look. And here’s the commented version (you can also type the numbers in conjunction with the datepickers, which may prove to be an easier way around).

Now, if you want to load content dynamically inside of a div, you just have to take a look at the jQuery’s Ajax documentation or read some tutorials – that’s pretty basic stuff.

The simplest way to make your Ajax would be wrapping your table inside a div, say, tablewrapper then you can use the .load() jQuery method:

$('#tablewrapper').load('UrlWhichContainsMyTable.html');

In the example above you’d echo a whole <table> ... </table> (or have it inside a html document).

If you want to load table rows dynamically, you can use .append and .appendTo methods to your table:

$.get('urlWithMyNewRows.html', function(r){ //or $.post, $.ajax etc
      $('table.bordered').append(r);
});

In the example above, you’d fetch a collection of table rows <tr> to append to your table from your urlWithMyNewRows.html document.

And take a look at $.getJSON documentation and examples if you need it. =]

ps. I call my fiddle “simple” as I didn’t even validate if the maxdate is before the mindate to display an warning neither show a “No results found” message, even though those are just a couple lines of code as well.