DateRangePicker with Select2

AskSmart

I'm using the DataTables framework to build table pages.

Now, I have to support two features that seem to collide: Select2 and DateRangePicker.

Here, you can see a sample of my table working with Select2 (You can multi-filter each column): http://live.datatables.net/kugetose/1/edit

Now the problem - I'm trying to functionalize the Date range button, which has to filter the table by the Start date column: http://live.datatables.net/fatikuwi/1/edit - I used DateRangePicker for this functionality. But, a bug arises here - if you try now filtering a column by the multi-select feature, you'll get an empty table (as well as sorting a column using the arrows).

I'm trying to solve this issue like 2 days already, but nothing.

Can someone help me fix this?

kthorngren

My suggestion is to use a Search Plugin for the date range search. Here is an example using an age search. This date range search plugin might help you get started.

Kevin

AskSmart

The point is that I don't want to use the search plugin this way. I want to be able to choose several kinds of ranges (monthly/yearly/custom) using only one drop-down button, as DateRangePicker provides us with. Also, it's a bad UX.

Other suggestions?...

kthorngren

The point is that I don't want to use the search plugin this way.

Not sure what you mean. The search plugin is independent of the input you use.

I want to be able to choose several kinds of ranges (monthly/yearly/custom) using only one drop-down button

You can create whatever input you want. In the search plugin you evaluate the inputs against the row data.

Have you looked at the Search Builder?

Can you update the test case with the date range picker you want to use? This way we can provide more specific help.

Kevin

AskSmart

I've uploaded the test cases - the first one without the DatePicker, and the second one with the DatePicker (click on the button Date range) and I've described the bugs that arise with it.

I'll inspect Search Builder, but I still want to know how to solve this issue.

Thank you.

My goal is - make one drop-down button that enables me to pick date ranges according to a specific column (date column) - Monthly/Yearly/Custom range.

kthorngren

Sorry I missed your second example.

if (startdate !== undefined) {

I'm guessing this determines if there is a date range selected. If its false you aren't returning anything which is the same as return false. You need to return true; in this case. For example:
http://live.datatables.net/fatikuwi/2/edit

Kevin

AskSmart

Thank you so much, Kevin!!!
Let me ensure I understood the issue - this block is invoked on each table load?

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {...}

So, when we only sort a table column, we load the new data to the table without selecting any date, so it returned False, right?

But what component of the code uses this Boolean value to draw any data in the table? That is, which component of the code is fed by the return value of $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {...}?

Again, thank you!

kthorngren

This is my understanding, the developers may correct or add details. Any table draw, ie, search, sort, page, executing draw(), etc, will execute any user defined search plugins ($.fn.dataTableExt.afnFiltering.push(..)). $.fn.dataTableExt.afnFiltering is an array that you can push() one or more search functions onto.

When a draw occurs Datatables executes its built in search engine followed by any search plugins. Each remaining visible row, after the built in search, is passed into the search plugins in the order they are pushed. The search plugins will return true or false to display or hide the row respectively. For example uncomment one of your console.log statements then select a date range and you will see output for all the rows. Re run the test case then select a Name (Ashton Cox for example) then select a date range to filter. You will see output for only one row (Ashton Cox).

In your case the search plugin is initialized after Datatables so it won't run when Datatables is initialized but will on subsequent table draws.

HTH,
Kevin

allan

As usual Kevin, your explanation is spot on!

The one thing that you need to watch out for with custom filtering plug-ins at the moment is that they are applied to every table. So if you want to apply it to only a specific DataTable, make sure you have an if condition inside the function and return true if it is not the table you want to filter on. more on this in the documentation.

Plug-in filters allow some really advanced search features such as our recent fuzzy search.

Allan

AskSmart

Thank you, friends, appreciate that!