Yet Another DataTables Column Filter - (yadcf) - Page 3

Yet Another DataTables Column Filter - (yadcf)

13

Replies

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited July 2014

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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

  • bdunsmuirbdunsmuir Posts: 17Questions: 4Answers: 0

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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

  • bdunsmuirbdunsmuir Posts: 17Questions: 4Answers: 0

    '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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited July 2014

    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited August 2014

    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

  • allanallan Posts: 54,738Questions: 1Answers: 8,564 Site admin

    Congratulations - really nice work!

    Allan

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited August 2014

    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

  • luivis7luivis7 Posts: 6Questions: 1Answers: 0

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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

  • luivis7luivis7 Posts: 6Questions: 1Answers: 0

    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.

  • MuhaheMuhahe Posts: 25Questions: 8Answers: 2
    edited August 2014

    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_rdaniel_r Posts: 460Questions: 4Answers: 67
    edited August 2014

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

  • luivis7luivis7 Posts: 6Questions: 1Answers: 0

    @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_rdaniel_r Posts: 460Questions: 4Answers: 67

    @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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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

  • jhaijhai Posts: 2Questions: 0Answers: 0
    edited November 2014

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

    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/

  • jhaijhai Posts: 2Questions: 0Answers: 0

    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!

  • luivis7luivis7 Posts: 6Questions: 1Answers: 0

    @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_rdaniel_r Posts: 460Questions: 4Answers: 67

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

  • luivis7luivis7 Posts: 6Questions: 1Answers: 0

    @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_rdaniel_r Posts: 460Questions: 4Answers: 67

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

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    @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

  • rbyrnsrbyrns Posts: 36Questions: 9Answers: 0

    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_rdaniel_r Posts: 460Questions: 4Answers: 67

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

This discussion has been closed.