Adding a Date Range Filter to a Master Table with the dataTables jQuery Plugin

JavaScript , jQuery , Web development Add comments

This past week I was asked to build a simple suggestion box web app.  The people responsible for reviewing the suggestions wanted to be able to filter the suggestions by keyword and by date range.

Having used the dataTables jQuery plugin in previous projects, I knew that it could take care of the keyword filtering requirement, but I had never used it to filter out rows that didn't fall into a date range.

I did some research and found enough information to get it working, but since I didn't come across any single crystal-clear example or demo for it, I figured I'd throw one together to illustrate it.  You can check the source code to see what's going on under the hood. I also used the jQuery UI Datepicker plugin to make the date range boxes more user-friendly.  Here's the URL:

http://www.thoughtdelimited.org/thoughts/demos/dataTablesDateRange/

Picture of dataTables table with date filter

 

10 responses to “Adding a Date Range Filter to a Master Table with the dataTables jQuery Plugin”

  1. mikey Says:
    this is great example.

    show me the example code's,please.

    thank you.
  2. Mike Henke Says:
    Very, Very cool! Thanks. Co-worker added this to our datatables custom tag.
  3. david Says:
    This is an old post but proved to be helpful in a pinch. Thanks!
  4. sunil Says:
    Hi

    Well it was neatly done stuff . Is there any thing related to editing datatable . So there should be dropdowns , radio buttons when i double click on it .

    Regards
  5. frfs Says:
    gvfdxgdfg
  6. Amos Says:
    Hi
    This is a great example. Could you share the code please?
  7. waiphuu pwint Says:
    Adding a Date Range Filter to a Master Table with the dataTables jQuery Plugin

    This is a great example. Could you share the code please ASAP?
  8. Anil Sahu Says:
    Hope you are well! I am looking for this code like to find date range according to that response in table.
    Please kindly share this code. Thanks in advance
  9. joseph Says:
    Where is the Source code?
  10. dsa Says:
    dsf

Leave a Reply