Yet Another DataTables Column Filter - (yadcf)

daniel_r

Thanks,

Yep it will filter the way you described , for example in a select filter you will have a blank entry and selecting it will leave only the blanks one (you better use filter_match_mode: "exact") and in filter_type: "range_number_slider" blank entry's will be treated as zero, feel free to see how it behave on other filter types, regarding the date columns you have several examples in the showcase:

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

http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

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

Daniel.

daniel_r

yadcf 0.8.0(final) is out !!!

*) All 8 filters support all data source: DOM, Javascript, Ajax and server-side processing

*) filter delay support text / range_number / range_date filters / range_number_slider filters , this feature can be really handy when you work with server-side processing (but not only)

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

bdunsmuir

Daniel, I am using the new DataTables in 1.10, I presume that is why it is not working for me. Do you have any plans to adapt it to the new api?

daniel_r

yadcf works with datatables 1.10 - with the previous init method - .dataTable (lowercase "d" instead of the uppercase "D")

you can take a look at the relevant showcase examples http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

In order to use the new API with the capital "D" you can keep an eye on the yadcf future releases on github https://github.com/vedmack/yadcf

bdunsmuir

'Yes, I'm using the uppercase "D" version, I like the new api. I'll look out for an update to yadcf. Is it something you are currently working on?

P.S.I struggle just to use some plugins, you are able to make your own! YADCF is very impressive, good for you.

daniel_r

Thanks @bdunsmuir , I plan to add the support for the "uppercase D version" hopefully to the next or to the one after the next

daniel_r

yadcf 0.8.2.beta is out !!!

*) Added support for the new DataTable API (uppercase "D")

*) Added support for the ColVis

Note that to use yadcf with new "D" API you should init yadcf with the following way

var oTable = $('#someId').DataTable({...});

yadcf.init(oTable, [{column_number: 0},{}...]);

Updated showcase page: http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

daniel_r

yadcf 0.8.2 is out !!!

*) Added support for the new DataTable API (uppercase "D")

*) Added support for ColVis plugin

*) Added support for Select2 plugin

Note that to use yadcf with new "D" API you should init yadcf with the following way

var oTable = $('#someId').DataTable({...});

yadcf.init(oTable, [{column_number: 0},{}...]);

http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

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

allan

Congratulations - really nice work!

Allan

daniel_r

Thanks @allan

yadcf 0.8.3.beta.3 is out !!!

*) Added custom function filter !!!

define your custom filter function and your custom filter values to yadcf and see some magic

Check out the updated showcase: http://yadcf-showcase.appspot.com/DOM_source.html (first column) , see code example in butom of the page and you can grab it from https://github.com/vedmack/yadcf/tree/master/lab

daniel_r

yadcf 0.8.3 (final) is out!!! See it live on: http://yadcf-showcase.appspot.com/

*) Added new filter type: filter based on custom function, filter_type: "custom_func". Read docs (in yadcf js) and see showcase example http://yadcf-showcase.appspot.com/DOM_source.html

*) exFilterColumn is now support sever side mode (non range filters only)

*) Fixed range sliders combined with filter_container_id property

*) Escape special chars in multi select filter

*) Additional minor bug fixes

luivis7

Hi Daniel,
First of all, love the plugin, makes everything so much easier!
Do you know if it's possible to set an autocomplete's filter to an ajax data source? that way we don't have to load all the data in an array? We have too many records.

daniel_r

Thanks,

Yep it is possible, lets say you want to populate the first and the fifth filters with predefined data, so in your returned json file (the one with the aaData) you should add the following properties

"yadcf_data_0": ["zero1","zero2"],
"yadcf_data_4": ["one1","one2"]

This will work for ajax source setup and for server side setup (use the latest yadcf version)

Note that this works both on datatables 1.10 old and new API

Read more in the following thread : https://groups.google.com/forum/#!topic/daniels_code/EGw-wPMboJk and in the last reply you will find an example file attached

luivis7

Daniel, I'm actually looking to not pre-populate the filter but to have the "auto-complete" type filter make an ajax call to grab the data source for the filter itself (not for the table).
If I pre-populate the data then that js array is going to reside somewhere in the client I'm guessing? For example, when I pre-populate a drop-down menu I can see all the values when inspecting the element, but where is the array for the auto-complete being stored?
I don't want to load an array of 400,000+ values. Please, let me know if it's not clear.

Muhahe

Hello Daniel, i have issue with your your yadcf and datatables 1.10 columnDefs render, When i use

"columnDefs": [
           {   
               "targets":0,
               "render": function (data, type, row){
                  
                   if(data.child == null){
                        return '<img class=addNewTaskDialogOpener data-id="p' + data.id + '" class="addButtonImg"  src=' + basePath + '/images/addButton.png ">';
                   }else{
                        return '<img class=addNewTaskDialogOpener data-id="p' + data.id + '" class="addButtonImg" src=' + basePath + '/images/addButton.png ">'+'<img id="p' + data.id + '" class="showHideImage" src=' + basePath + '/images/plus.png>';
                   }               
               }
           },

filter values are only 'undefined'

Is it possible to use your filter with this column definition? (datatables 1.10 capital "D")

daniel_r

@luivis7 , you want to load your autocomplete values on the fly? while user types in the letters? If so please google for for such a solution for jquery autocmplete/chosen/selec2 if its possible (such example exists) you can point me to it and I'll see how I can integrate it into yadcf (otherwise it will be out of scope of yadcf to develop such thing from scratch) , if so open a new issue of github page with all the relevant info.

@Muhahe , seen you new opened issue on github ,please provide more info...

luivis7

@daniel_r you can check out this link: http://www.codeproject.com/Tips/639578/jQuery-Autocomplete-MVC-and-WebAPI I actually did a brief sample on it.

daniel_r

@luivis7 , How is calling the content of the autocomplete from using that approach is better than using the datatables ajax response? I mean in both cases the value will be stored on the client side (in one shot)

daniel_r

yadcf 0.8.4 (final) is out!!! See it live on: http://yadcf-showcase.appspot.com/

• New feature, added initFilterMultipleTables function, one (currently only filter_type: "text") filter for multiple tables - filter at once!

• New feature, added exResetAllFilters function: Allows to reset all filters externally/programmatically (support ALL filter types!!!) , perfect for adding a "reset all" button to your page!

• exGetColumnFilterVal support new Datatable (Capital "D")

• Fixed IE8 issues

• Migrated to MIT license

• Better support for columnDefs

• Date filtering with server side configuration will send the value / from-to (if range date) as is (without converting into milliseconds)

• Bug fixes

daniel_r

yadcf 0.8.5 is out!!!

Supporting sScrollX / sScrollY, allow filters in footer too and more goodies!!!

See changelog https://github.com/vedmack/yadcf/blob/master/ChangeLog.markdown

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

jhai

Hello, first at all, thank you, your work are really fantastic...

I'm using the 0.8.5 version and i'm getting a js error :
TypeError: oTable.settings is not a function

using this JS :

<%$(document).ready(function () {
var oTable;
oTable = $('#example').dataTable( {
"responsive": true,
"processing": true,
"serverSide": false,
"deferRender": true,
"deferLoading": <% Response.Write(TotalCount.ToString()); %>,
language: {
url: '//cdn.datatables.net/plug-ins/380cb78f450/i18n/Spanish.json'
},
"ajax":
{
url: "Services/Users.asmx/GetDataV2",
contentType: "application/json; charset=utf-8",
dataType: "json",
"dataSrc": function (jsonData) {
var parsedJson = $.parseJSON(jsonData.d);
//console.log(parsedJson.tableData);
return parsedJson.tableData;
}
},
"columns": [
{ "data": "Tipo_cliente" },
{ "data": "Num_cli_VPC" },
{ "data": "Nombre_empresa" },
{ "data": "Ruta" },
{ "data": "Ventas_A_1_YTD" },
{ "data": "Ventas_A_YTD" },
{ "data": "Margen_A_YTD" },
{ "data": "Dias_sin_compra" },
{ "data": "Frecuencia_Visita" },
{ "data": "Frecuencia_Compra" },
{ "data": "idunique" },
{ "data": "idunique" }

            ]
        });


        yadcf.init(oTable , [{column_number : 0}]);


        //var colvis = new $.fn.dataTable.ColVis( oTable );
        //$( colvis.button() ).insertAfter('div.info');

});%>
Anyone have any idea of the problem?

I want to put a filter in the first column... without the yadcf plugin, there is no error

Thanks for you help.

Julien

daniel_r

You are using yadcf improperly, if you use the lowercase datatables constructor your shouldn't use the yadcf.init function, instead your should use it like this

oTable = $('#example').dataTable({...}).yadcf(...);

go over the showcase and inspect code snippets below...

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

jhai

Ok it seems to work now !!! I try it before but i'm sure that i made a mistake.
thanks for your help and quick answer!

luivis7

@daniel_r, I'm using yadcf and my DataTable is setup to be 'width 100%' which works fine without adding the yadcf filters but when I do the DataTable goes off screen and can't even scroll sideways to view the columns. Is there some additional setup that has to be done for the filters to resize automatically?

daniel_r

@luivis7, Please provide an example because of your issue because for me it works fine. and know that you could try playing with yadcf filters style classes (all filters have classes and ids so you can style them as you want)

luivis7

@daniel_r, I replicated the setup in this fiddle: http://jsfiddle.net/e4685cug/ but because of the layout of jsffidle I can't tell if it's working, seems like it is? it could be a conflict with the css in my site.
One thing I did notice is that if I add the 'colReorder' to datables and move a column around the filter is applying the filtering to the previous data the header was in. For example, go into the fiddle drag Header4 into Header3 position and then filter Header4 on the 1.8 value and see the results.

daniel_r

@luivis7, will take a look at it in the near days...

daniel_r

@luivis7, regarding the width issue, I can't replicate it and on your fiddle (even full screen) it looks ok , regarding the colReorder issue you can open a new issue on yadcf github page https://github.com/vedmack/yadcf/issues

rbyrns

Any chance of getting the dateFormat for range_date to allow the mysql yyyy-mm-dd (or yy-mm-dd as datepicker calls it)? I am trying to put the yadcf in the head and the regular search box in the bottom. It works best with server side because it starts narrowing the search better and frankly has to be that way.

Also, I would really like for some nice person to post a php version of the server side processing additions. It would really make this more dataTables friendly imho.

daniel_r

regarding the yyyy-mm-dd format, you can open a new issue for that on github but it will take some time because there are already several open issue... yadcf filters can be placed in the header or the footer , you can inspect the showcase to see both approaches...