RobertoPrevato / jQuery-KingTable

A jQuery plugin for administrative tables that are able to build themselves, on the basis of the input data.
MIT License
117 stars 33 forks source link

Date filter #3

Closed gestinronan closed 8 years ago

gestinronan commented 8 years ago

hello,

i would like to filters my table on an interval into two date . but custom filters i try to compare date does not works. have you an idea to do this things?

thx

clicitra commented 8 years ago

Hi,

This feature also interested me !!! I try several weeks ago to achieve, but without success.

My only solution today is to cheat by adding hidden columns Days, Month and Year, and play with 6 filter field :( :( :(.

But the solution is not really ergonomic (and very dirty :-1: )

A simple assumption of a field with a time picker would be perfect if it could exist

Is that possible? how to realize it?

Thank you in advance,

cordially

RobertoPrevato commented 8 years ago

@gestinronan, I don't understand what is the exact problem, can you please give me more information? if you defined a custom filter view, containing two input elements for a date range:

<label for="start-date">Start date</label>
<input id="start-date" type="text" class="datepicker" name="start-date" />
<label for="end-date">End date</label>
<input id="end-date" type="text" class="datepicker" name="end-date" />

And filters implementation (for client side filtering), like described in this wiki page,

$("#content").kingtable({
    id: "my-table",
    filtersView: "custom-filters",//can be the id of an element;
    filters: {
      //NB: the keys of filters object must match the name property of input elements
      //that are defined in the filters view
      "start-date": function (filter, obj) {
        // implement here your logic: the filter is the value in the input field (to be parsed into a date)
        // obj is a single item in your table
        // return true if the object should be filtered, false otherwise
      },
      "end-date": function (filter, obj) {
        // implement here your logic: the filter is the value in the input field (to be parsed into a date)
        // obj is a single item in your table
        // return true if the object should be filtered, false otherwise
      },

You should be able to filter elements using a date range. Consider that: in the above example the value of the input fields must be parsed and validated by you. I am going to prepare an example that integrates the jQuery DatePicker, to make this process easier.

RobertoPrevato commented 8 years ago

@clicitra you are absolutely right: in the current implementation it's not easy to integrate a datepicker in the custom filters view. I will improve the library to allow for easy integration with jQuery DatePicker (or any other library that provides this feature), and prepare a working example for you.

I will do it soon and let you know when it's ready.

RobertoPrevato commented 8 years ago

@gestinronan, @clicitra I kept my word: I improved the library to support datepickers easily, and to allow the string search inside date strings.

A working demo is available here. If you pull the latest changes from the repository, you will be able to run the included Flask development server and see the working demo with ajax requests (page /datetime-filters.html).

However, keep in mind that:

  1. usually dates are displayed in culture-dependent string representations, this is why previously I was disallowing search inside JSON serialized dates
  2. if your results need to be paginated on the server side, you'll need to obtain culture-dependent string representations of dates on the server side (integrating your own localization strategy), and implement your filtering logic there.
  3. the example I included is doing everything on the client side, which works if you fetch whole collections from the server (e.g. you are working with small collections that can be paginated and filtered client side), like I explained in the wiki
  4. support for sorting dates is not complete, yet (when doing string search, it's necessary to search inside the string representation of the dates - this is what the user sees -, while when sorting it's necessary to sort date objects. Currently the library sorts dates in alphabetical order, which of course doesn't make much sense. I must implement a piece of logic that does the trick)
RobertoPrevato commented 8 years ago

Closing the issue, since I didn't receive any feedback.

gestinronan commented 8 years ago

I'm going to test this right now