How to combine plug-ins/extensions?

jscodemonkey

Is there a way to combine this with the date range filter? I'm currently trying to use both on a table I have, but they conflict with one another when I try to have both if statements under the search.push function.

anyone by chance have an idea what that might look like?

date range: https://datatables.net/extensions/datetime/examples/integration/datatables.html
range: https://datatables.net/examples/plug-ins/range_filtering.html

I need to allow my users to filter by putting in a min/max score into the input fields and then choose the calendar dates to further filter. I want the functionality just as it is... I can't get them both to work at the same time.

kthorngren

You can push each search plugin separately. The first one will filter the rows based on its range. Then the second will run to filter the remaining rows. The table will show the rows that fall within both ranges. Basically an AND search.

If you want an OR search you will need to refactor both sets of code to check both ranges and return true if the data is in either range or false if not in either range. Here is a pseudo code example:

var dateRange = true;
var ageRange = true;

var dateCol = 4;
var ageCol = 3;

if data[ageCol] not in range ageRange = false;
if data[dateCol] not in range dateRange = false;

return ageRange || dateRange;

If you need further help please build a simple test case with an example of your data and search plugins so we can work with your code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jscodemonkey

Thanks. I'll make sure to setup a test case and post it here. This is my first time using datatables.

I'm trying to combine not only these 2 plug-ins, but also a way to 'clear' all filtering and the single dropdown filter: https://datatables.net/examples/api/multi_filter_select.html

im filtering a score, a date range and a type of score (drop down select option). Then a way to clear any that are being used. They might not all be used at once. I appreciate any help I can get once I post the test case tomorrow.

kthorngren

Just some tips that may help:

1. Use Javascript or jQuery methods to clear the select inputs for the columns and the range searches
2. Use table.columns().search( "" ).draw() to clear the column searches
3. Your 2 plugins should check for input values and if blank return true to show all rows

Kevin

jscodemonkey

Thanks! I worked with another dev and figured out how to get it to work. I still have some other questions which will be a diff. thread and I'll make sure to use a test case.

However for this - you can see the solution here. This is to get the number range and date range to work with one another. Your clear button resolution also worked.

Main Solution: http://live.datatables.net/hekiluha/1/
Clear Solution:

$('.clear').on('click', function(){
      $('input').val('');
      table.search( '' ).columns().search( '' ).draw();
});