Yet Another DataTables Column Filter - (yadcf)

Yet Another DataTables Column Filter - (yadcf)

daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
edited April 2013 in Announcements
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
«134

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    Cool...

    I'm glad you liked it :)

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

    Daniel.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Oops - I meant to move it and clean forgot. Now in the Announcements category.
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited August 2013
    New version is out 0.3.0

    Added support for multiple tables

    Examples: http://yadcf-showcase.appspot.com/
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    New version is out 0.3.5

    Added new filter type : range of numbers

    Examples: http://yadcf-showcase.appspot.com/
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    This is becoming a very powerful addition to DataTables! Thank you, on behalf of everyone how has benefited from your work on this!

    Allan
  • jfbouzanjfbouzan Posts: 4Questions: 0Answers: 0
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    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/
  • FloFlo Posts: 9Questions: 0Answers: 0
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited October 2013
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    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/
  • kawikakawika Posts: 4Questions: 0Answers: 0
    Any plans to support other frameworks besides JQuery UI? (Namely bootstrap).
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited November 2013
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    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/
  • jfbouzanjfbouzan Posts: 4Questions: 0Answers: 0
    Is there a way to allow for multiple selections on the select input filter-- perhaps through use of the shift key. thanks.
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited January 2014
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited January 2014
    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/
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Very very cool! Thank you for your work on this and for sharing it with us all!

    Allan
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    You are welcome :)
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    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
  • MisiuMisiu Posts: 68Questions: 4Answers: 2
    Thanks for sharing this awesome plugin :) Looks awesome!
    Did You try to integrate it with Bootstrap3?
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    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...
  • CarlosStgoCarlosStgo Posts: 1Questions: 0Answers: 0
    Thanks!!!

    Super complete plugin.

    how can i remove pager?

    thks for your help
  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    You are welcome,

    What pager do you want to remove? are your sure its part of my yadcf plugin?
  • paulieDTpaulieDT Posts: 1Questions: 0Answers: 0
    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...
  • trapagualtrapagual Posts: 6Questions: 0Answers: 0
    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    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!
This discussion has been closed.