Range filter (only for dates) on column footer

Range filter (only for dates) on column footer

itajackassitajackass Posts: 165Questions: 49Answers: 3

Hi i'd like to insert a input search in the footer for each column.
All is ok for single input field search (exact or partial word found)

But i'd like to insert double input (for range min-max) in case column contain a date value.

Actually i'm in this situation (see last column with double input field):

https://live.datatables.net/tivalozi/86/edit

Actually i used data-type="data-min" to set placeholder name with suffix min or max.

Anyone can help me how to implement range search only for a particular column when there are 2 input fields?
Thanks

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949
    Answer ✓

    I would leverage this example using the DateTime extension. Move the code to init the text input event handlers inside the else clause so the date range inputs aren't initialized. Add the code from the example and update the two inputs with id and name attributes. Updated test case:
    https://live.datatables.net/dezayoju/1/edit

    Kevin

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    thank you for your support!

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    Only one question.

    How to prevent using hardcoded index (in this case 4) data[4], and retrieve an index by column header class: "colDate" in my example?

    https://live.datatables.net/dezayoju/3/edit
    

    Tried some code without success:

    data[table.columns('.colDate').index()]
    
    data[settings.sInstance.columns('.colDate').index()]
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    Best option is probably to define a filter function for that column using column().search() rather than using the global search.

    https://live.datatables.net/dezayoju/4/edit

    There is no option inside a ext.search function to lookup by class name (at least not a performant way).

    Allan

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    Thanks, i don't know why but after copy/paste your new code, it doesn't work on my localhost environment... i've checked everything!

    i've added console.log("triggered") inside table.column('.colDate').search(function (data) { ... } but it seems it never trigger when #min or #max change, so the table redraw! :(

    nevermind, i'm still on DataTable.ext.search.push(...) code that works great!

  • itajackassitajackass Posts: 165Questions: 49Answers: 3
    edited September 20

    Hi i've found that:

    DataTable.ext.search.push(...)
    

    from your example: https://live.datatables.net/dezayoju/1/edit

    is applied on ALL datatables in the same page. Is it possible to assign this filter only to a specified table on a page with multiple tables?

    For example only to id="table1" and ignore others?

    Thanks

    EDIT: found solution: https://live.datatables.net/tihuyiqi/1/edit

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949

    See this thread for how to handle this.

    Kevin

Sign In or Register to comment.