Yet Another DataTables Column Filter - (yadcf)
Yet Another DataTables Column Filter - (yadcf)
daniel_r
Posts: 460Questions: 4Answers: 67
Hi,
Just wanted to say that I've finally finished my column filter plugin for datatables.
It's called "Yet Another DataTables Column Filter" or in short "yadcf"
I started to develop it for my own use and at some point decided to release its as plugin...
Here a kickoff example: http://jsbin.com/esezof/1
Here the github page: https://github.com/vedmack/yadcf
And here some info about the features:
*Parsing various types of columns:
plain text
plain text with delimiter
one or more HTML elements with the ability to extract text / value / id from each HTML element
*CSS support:
each filter element has got a css style class , so its style can be easily overridden
Reset button for filter:
next to each filter a reset button will appear (this button allows the user to reset the filter)
*Filter in use visual notification:
when a certain filter is being used it will be highlighted (the color of highlight can easily be changed with css)
*Miscellaneous:
predefined data source for filter (array of strings)
ability to place the filter in an external html element (for example: inside a div element)
change the filter's default label (Select value, etc)
change the filter's reset button text (x, clear etc)
Usage example:
[code]$(document).ready(function(){
$('#example').dataTable().yadcf([
{column_number : 0},
{column_number : 1, filter_container_id: "external_filter_container"},
{column_number : 2, data:["Yes","No"], filter_default_label: "Select Yes/No"},
{column_number : 3, text_data_delimiter: ",", filter_default_label: "Select value"},
{column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});[/code]
Regards,
Daniel
Just wanted to say that I've finally finished my column filter plugin for datatables.
It's called "Yet Another DataTables Column Filter" or in short "yadcf"
I started to develop it for my own use and at some point decided to release its as plugin...
Here a kickoff example: http://jsbin.com/esezof/1
Here the github page: https://github.com/vedmack/yadcf
And here some info about the features:
*Parsing various types of columns:
plain text
plain text with delimiter
one or more HTML elements with the ability to extract text / value / id from each HTML element
*CSS support:
each filter element has got a css style class , so its style can be easily overridden
Reset button for filter:
next to each filter a reset button will appear (this button allows the user to reset the filter)
*Filter in use visual notification:
when a certain filter is being used it will be highlighted (the color of highlight can easily be changed with css)
*Miscellaneous:
predefined data source for filter (array of strings)
ability to place the filter in an external html element (for example: inside a div element)
change the filter's default label (Select value, etc)
change the filter's reset button text (x, clear etc)
Usage example:
[code]$(document).ready(function(){
$('#example').dataTable().yadcf([
{column_number : 0},
{column_number : 1, filter_container_id: "external_filter_container"},
{column_number : 2, data:["Yes","No"], filter_default_label: "Select Yes/No"},
{column_number : 3, text_data_delimiter: ",", filter_default_label: "Select value"},
{column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});[/code]
Regards,
Daniel
This discussion has been closed.
Replies
I've added a link from the DataTables news feed.
Allan
I'm glad you liked it :)
p.s
Shouldn't this thread be categorised as "Announcements" ?
Daniel.
New version is out 0.2
Added new filter input type : autocomplete
Example: http://jsbin.com/orixab/1
Github page: https://github.com/vedmack/yadcf
Added support for multiple tables
Examples: http://yadcf-showcase.appspot.com/
Added new filter type : range of numbers
Examples: http://yadcf-showcase.appspot.com/
Allan
Wondering if there's a fix for IE 8. I get an error on the sample pages with IE 8
http://yadcf-showcase.appspot.com/
Whenever a selector filter is selected, "Object doesn't support this property or method" .
Please open an issue on the github page : https://github.com/vedmack/yadcf/issues?milestone=1&state=open with some info (what filter type gives the error, etc') and I will take a look.
Added new filter type : range of numbers with slider widget - make use of the jQuery UI Slider widget (with some enhancements)
+
Fixed IE8 bugs
Examples: http://yadcf-showcase.appspot.com/
nice plug-in!
I am using an array of objects for my data source (http://datatables.net/release-datatables/examples/ajax/objects.html) and all the dropdowns end up empty.
It does work with an array of arrays, so I guess the question is: Would/Will your plugin be able to handle mData calls?
Please open an issue on the github page : https://github.com/vedmack/yadcf/issues?milestone=1&state=open with some info and I will add the support for it.
Added new filter type: range between two dates with jQuery UI Datepicker widget, filter_type: "range_number_slider"
+
Added new attribute to yadcf constructor: date_format, it defines the format in which the date values are being parsed into Date object and also in which format the datepicker will display the selected dates, default value: "mm/dd/yyyy"
Examples: http://yadcf-showcase.appspot.com/
New features were added:
*)Added support for mData (including deeply nested objects)
*)New feature: filter_match_mode, Allows to control the matching mode of the filter (supported in select and auto_complete filters), Possible values: contains / exact
*)Added support for aoColumns { "bVisible": false }
And many more
http://yadcf-showcase.appspot.com/
Added support for bStateSave (that one was one BIG feature) and bDeferRender .
Showcase was updated
http://yadcf-showcase.appspot.com/
Allan
*) Added new filter type: date input, make use of the jQuery UI Datepicker widget, filter_type: "date"
*) Several code enhancements
Showcase was updated
http://yadcf-showcase.appspot.com/
*) Added integration with Chosen plugin (for the select filter)
*) For the integration with Chosen: added two new attributes, 'select_type' to allow turning of simple select into chosen select and 'select_type_options' used to pass an object to the chosen constructor , don't forget to include the chosen js file and read/look at the docs/showcase
Added new page to showcase
http://yadcf-showcase.appspot.com/DOM_source_chosen.html
Did You try to integrate it with Bootstrap3?
I did , although it was a quick check and I'm not sure if it was 2 or 3 , but it worked just fine...
Super complete plugin.
how can i remove pager?
thks for your help
What pager do you want to remove? are your sure its part of my yadcf plugin?
Question: I have some tables with thousands of records.
I am trying to figure out how to best set the configuration to use yadcf.
What i saw in my test is that it becomes slow with auto completion when the column has too many different elements. So i want to disable "auto_completion" on some column filters but i cannot understand how.
Should i use the normal filter of datatables? It would be much much quicker to just have a specific type in the yadcf plugin.
I am sorry if i did not see something obvious...
Thanks for the great work.
Only a doubt.
Could I fill in the values for the select filter from the server? If yes, please, how?
Another doubt. Is available a simple "text" mode filter for columns with a large number of distinct values? (I think this is the same of the last comment, or alike).
Thanks again
Walt
Could I fill in the values for the select filter from the server? -> see this thread : https://groups.google.com/forum/#!topic/daniels_code/tq4vbDDDp1s
Is available a simple "text" mode filter? -> keep an eye on the opened issue https://github.com/vedmack/yadcf/issues/34 or this thread for upcoming version release (I already implemented but I need to test it before release)
-----
Off topic, I'm 99% positive that I replied to the previous thread! And it looks like it was deleted :/ ??? Weird!