dynamic Date or number range filter
dynamic Date or number range filter
Oensel
Posts: 19Questions: 4Answers: 1
I created a dynamic filter popup that shows every columns title and offers you a manual search input-field and a selectbox with unique data from the tables data for this column.
For dates and numbers there is a "from" and a "to" input field.
The column-search works fine, but the range-filter-plugins don't work for me, becaus there may be up to 6 Date-Columns in my tables with different names and indexes. I've got about 200 different dynamically genereated tables, so I can't define it for everey single table.
I need a way to range search a defined column on demand by click, comitting the following information:
tablename (for accessing the API for the used table)
column-index
min (date or number)
max (date or number)
I hope anyone got an idea for me
This question has an accepted answers - jump to answer
Answers
Maybe this date range plugin will help get you started.
Take a look at bindrid's example in this thread. It is setup so that you can define
columns.typeto control which columns the data range search uses.Kevin
The shown examples use defined columns and/or defined input-fields.
My columns and input-fields are dynamically created, because all my tables are very diferent. Some have 6 or more date-columns.
So I need a method, that I can call with tablename, column-id, min-value and max-value that searches for my range in the specific column.
How do you know which columns are dates and how are you dynamically creating them? Is there a way you could add the
columns.typeoption when creating them?Do you have multiple tables on a page?
You will need to use the search plugin to perform a range search. You call it using
draw(). The plugin will run for the table that is being drawn. There isn't a way to pass parameters to the function.The tricky part will be to set it up such that when the plugin runs for table it can find all the date inputs for the table. You cold store this in a global variable or may use an HTML 5 data attribute on the -tag table
element. You can get the table id usingsettings.nTable.id` in the plugin then get the data attribute using jQuery. See this example of how to get the table id:http://live.datatables.net/lovepaxi/1/edit
If you would like help with this please create a test case or update my example to show an example of what you have. You can use Javascript data to simulate your table load and data, like this example. I'm sure we can find a way to make the search generic and reusable. Just need to understand your specific environment.
Kevin
There is a way you can use parameters. You will need to create an API to do so. Here is a simple example that passes a search term and search column to the API to search a specific table:
http://live.datatables.net/lovepaxi/3/edit
You could do something similar with the min-value and max-value ranges.
Kevin
Noticed your title has date or number range. There is a number range plugin and an example.
Kevin
Sorry for my late answer, but I got it working with the solution kthorngren linked "http://live.datatables.net/lovepaxi/3/edit".
Every table generates its filter popup automatically, by filling it up with its columns and columns data for multi-select box choice.
Thanks for letting us know. Glad my example helped.
Kevin
Some problem occured while testing.
I'm filtering my tables by "search()" for some columns like:
tableApi.column(10).search('mysearch').draw();tableApi.column(12).search('mynextsearch').draw();If I use the my method "multiFilter", it compares the range to ALL rows, not only the visible ones, that are filtered yet. So all my previous "search"-calls are resetted.
tableApi.multiFilter(type, columnIndex, min, max).draw();`$.fn.dataTable.Api.register( 'multiFilter()', function ( type, columnIndex, min, max ) {
this.iterator( 'table', function ( context )
{
context.type = type;
context.columnIndex = columnIndex;
context.min = min;
context.max = max;
} );
return this;
} );
$.fn.dataTable.ext.search.push(
function( context, data, dataIndex ) // data contains all rows of the table
{
var type = context.type;
var columnIndex = context.columnIndex;
var min = context.min;
var max = context.max;
var value = data[columnIndex];
{
return true;
}
else
{
// do the filtering and return true or false
}
});
`
I would love to get a nice idea.
The search plugin runs after all the searches have been applied so it only evaluates the rows that are still visible. I updated my example to show this:
http://live.datatables.net/lovepaxi/4/edit
It searches the Position column for
Engineerwhich removes theAshton Coxrow. Click theSearch for Ashton in table 1you will see no results.Make sure you aren't clearing searches first. You can use
console.log( data );at the beginning of the search plugin to see the rows it is iterating.If you still need help then please update my example, create your own or post a link to your page so we can take a look.
Kevin
I got a test case online now: http://live.datatables.net/lovepaxi/5/edit
If you use both range filters, you only get one working.
First age -> filtered by age range
Second salary -> only filtered by salary, age filter is resetted
The other way around it's the same behavior.
But you can stack "column-search" and ONE range-filter.
The problem is this solution uses parameters to define the column number, min and max values which are saved as specific properties on the context object. You could expend this and save more properties, one for each column, on the context object. Or you can skip the parameter passing and have the search plugin read all the inputs for the search.
You could create multiple API functions, one for each input. Each function will set specific properties on the context object. The search plugin will look for all the possible context properties and perform the search appropriately depending on whether you want an AND or OR search.
You can have one or more search plugins. This checkbox search example has one for each column (or input group):
http://live.datatables.net/rosahuka/1/edit
Its an AND search between the two columns. You can change it to an or search by combining these into one plugin and restructure the conditions to check for either of the values being found.
Basically it boils down to the search plugin needs to look at all possible options whether its the inputs or properties of the object.
Kevin
Keep in mind that the
contextobject is the settings for the table. Make sure to use properties that won't conflict with what is there. Maybe create a property that contains all the filtering properties.Kevin