Yet Another DataTables Column Filter - (yadcf)

daniel_r

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

allan

Really nice - I like it interaction a lot. Particularly how easy it is to clear an existing filter. Nice one :-)

I've added a link from the DataTables news feed.

Allan

daniel_r

Cool...

I'm glad you liked it :)

p.s
Shouldn't this thread be categorised as "Announcements" ?

Daniel.

allan

Oops - I meant to move it and clean forgot. Now in the Announcements category.

daniel_r

Hi,

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

daniel_r

New version is out 0.3.0

Added support for multiple tables

Examples: http://yadcf-showcase.appspot.com/

daniel_r

New version is out 0.3.5

Added new filter type : range of numbers

Examples: http://yadcf-showcase.appspot.com/

allan

This is becoming a very powerful addition to DataTables! Thank you, on behalf of everyone how has benefited from your work on this!

Allan

jfbouzan

Thank you for your work. This plug-in is awesome.

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" .

daniel_r

jfbouzan, thanks.

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.

daniel_r

Another new version is out 0.3.8

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/

Flo

Hi Daniel,

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?

daniel_r

Thanks Flo,

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.

daniel_r

0.4.0 version is out!

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/

kawika

Any plans to support other frameworks besides JQuery UI? (Namely bootstrap).

daniel_r

I just checked it with the following example http://datatables.net/blog/Twitter_Bootstrap_2 and it works (tested only the select filter) in case that you have some specific issue you can open an issue on my project github page https://github.com/vedmack/yadcf/issues/new

daniel_r

0.5.0 version is out!

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/

jfbouzan

Is there a way to allow for multiple selections on the select input filter-- perhaps through use of the shift key. thanks.

daniel_r

Actually some one (Ryan Harris) implemented multi select filter for yadcf a day ago and sent a pull request on github, so you better keep an eye/watch the project on github to be informed about official release of the next version.

daniel_r

0.5.6 version is out!

Added support for bStateSave (that one was one BIG feature) and bDeferRender .

Showcase was updated

http://yadcf-showcase.appspot.com/

allan

Very very cool! Thank you for your work on this and for sharing it with us all!

Allan

daniel_r

You are welcome :)

daniel_r

0.5.8 version is out!

*) 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/

daniel_r

0.6.0 version is out!

*) 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

Misiu

Thanks for sharing this awesome plugin :) Looks awesome!
Did You try to integrate it with Bootstrap3?

daniel_r

Thanks,

I did , although it was a quick check and I'm not sure if it was 2 or 3 , but it worked just fine...

CarlosStgo

Thanks!!!

Super complete plugin.

how can i remove pager?

thks for your help

daniel_r

You are welcome,

What pager do you want to remove? are your sure its part of my yadcf plugin?

paulieDT

Wow this plugin is just awesome! Great job!!

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...

trapagual

Great plugin, working like a charm, even with a custom date format.
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

daniel_r

Thanks,

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!