DataTables Column Filter add-on for the data table - Page 2

DataTables Column Filter add-on for the data table

2»

Replies

  • kasperskov303kasperskov303 Posts: 9Questions: 1Answers: 0
    Has there been any fixes/workarounds for the special character bug?
  • smckeesmckee Posts: 3Questions: 0Answers: 0
    I'm having a problem with hidden columns and the filters getting out of whack. I've seen several generalized discussions about problems with column filtering and hidden columns but none relating specifically to using this plug-in. I have a working example of this at:

    http://live.datatables.net/abated/3/edit#source

    If you set the visibility of the second column to false then the filters for all following columns are off by one.

    Is there a setting that I'm missing? I need to be able to randomly turn on and off various columns depending on what page the table is being displayed on.

    Any ideas?
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I think this issue might be the one you are seeing: http://code.google.com/p/jquery-datatables-column-filter/issues/detail?id=88 - which is specifically for that plug-in.

    Allan
  • Gl3nnGl3nn Posts: 5Questions: 0Answers: 0
    Hi

    I'm using DataTables with the columnFilter add-on and I was wondering if there is a way i can preset a date-range?

    My table contains events, I want to show only upcoming events so I want to set the lower date-range to current date.

    [code]
    })
    .columnFilter({
    aoColumns: [
    {type: "text"},
    {type: "date-range"}, // I want to set this lower value to current date !
    {type: "select"}
    ]
    });
    [/code]

    Thanks

    Glenn
  • metrangiametrangia Posts: 2Questions: 0Answers: 0
    I have a table with 8 columns, but I want to filter on just the first 2 columns. Rather than having two input boxes (one for each column being filtered), I'd like to have one input box that filters both columns. This would be similar to the default behavior, which is one input box that filters all columns, except I want to filter on just 2 columns, not all of them. Has anybody done this? Thanks.
  • smckeesmckee Posts: 3Questions: 0Answers: 0
    Allan:

    I'm sorry I missed your response, yes that was the exact solution, thanks!

    Shawn
  • woo37830woo37830 Posts: 9Questions: 0Answers: 0
    I have a sortable table with two columns I don't sort on. I'd like also not to show a filter there as it affects the width of the columns. Is there a simple way to do this. I'm presently using the default configuration and only providing a tfoot.
  • cargonsancargonsan Posts: 2Questions: 0Answers: 0
    Hi All...

    Is posible to change default label, in select filter?

    Thanks a lot
  • btBillbtBill Posts: 31Questions: 0Answers: 0
    Are there any filtering options like

    http://demos.kendoui.com/web/grid/filter-menu-customization.html

    where you click on the header and a div appears with types of choices or 'preset' filter choices?
    I would imagine that I can css it, but is there anything built in so far?

    Thanks.
  • PavilionPavilion Posts: 12Questions: 0Answers: 0
    edited July 2013
    Hello -

    I'm trying to get .columnfilter() up and running and have run into a problem. It is outlined below:

    1. My default dataTable() settings were as follows:

    [code]
    // Set Defaults for all DataTables
    $.extend( $.fn.dataTable.defaults, {
    "aaSorting": [[ 0, "desc" ]], // Default sort is on column 0 (Start Time). I've no idea what the "desc" parameter is - but it's required.
    "sDom": 'rt<"bottom"iflp<"clear">>', // Controls placement of Information (1-x entries) and the search box. Keeps it at the bottom
    "bAutoWidth": false, // turning off autoWidth solved some formatting issues on show/hide columns.
    "bFilter": true,
    "bSort": true,
    "bPaginate": false,
    "bDestroy": true, // Allows destruction of table when getting new data groups. Then reconstruction can happen.
    // "sScrollY": "400px",
    });
    [/code]

    Notice that "sScrollY": "400px", is commented out.

    2. It seems that if I keep the "sScrollY": "400px", setting it interferes somehow with .columnfilter().
    3. Specifically the .columnfilter do not render within the footer itself. They render within the body (or what should be the body).

    An example of the table WITH "sScrollY": "400px", set can be found here: http://www.myofficelog.com/logT/olT.php

    An example of the table WITHOUT "sScrollY": "400px", set can be found here: http://www.myofficelog.com/logT/olP.php

    To see how this plays out as the table grows, choose Log Group "Show Everything" from the select box in the upper left hand corner.

    How can I get scrolling - without interfering with .columnfilter()?

    Thanks in Advance:

    Pavilion
  • prithvi999prithvi999 Posts: 1Questions: 0Answers: 0
    Hi,

    I am very new to datatables and it would be greatly helpful if someone could list the installation steps for this addon.
    In my case, I have a working datatable. I have then downloaded this columnFilter.js , added it to my project and finally I have changed my code from

    [code] $('#results_table').dataTable(); [/code]
    to
    [code] $('#results_table').dataTable().columnFilter();[/code]

    But this does not show any changes in my datatable output, I donot get any filters in my page. Any help would be appreciated.

    Thanks in Advance
  • juliechijuliechi Posts: 1Questions: 0Answers: 0
    Hi,
    I'm new for dataTabes-columnFilter , seems to me columnFilter only works if no parameters passed in dataTable instance.

    //works without parameters passed in dataTable
    $('#example').dataTable().columnFilter({
    aoColumns: [ { type: "select"},
    null] });
    //doesn't work when disable sort, filter, info in dataTable
    ('#example').dataTable({
    "bFilter": false,
    "bInfo": false,
    "bSort": false
    }).columnFilter({
    aoColumns: [ { type: "select"},
    null ] })
    Does jquery version matter? Anyway here is what i'm using:
    jquery-2.0.3.min
    jquery-dataTables-1.9.4.min.js
    jquery.dataTables.columnFilter-1.5.1.js

    Thanks.
  • markostamarkosta Posts: 2Questions: 0Answers: 0
    I try implemente your fantastic Add-On but i can't make it work
    http://marcosta.com/datatables_filtering.htm

    What's my mistake ?!
  • paladice51paladice51 Posts: 6Questions: 0Answers: 0
    Hello,

    I have this code :

    [code]
    jQuery.fn.dataTableExt.oSort['numeric-comma-asc'] = function (a, b) {
    var x = (a == "-") ? 0 : a.replace(/,/, ".");
    var y = (b == "-") ? 0 : b.replace(/,/, ".");
    x = parseFloat(x);
    y = parseFloat(y);
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function (a, b) {
    var x = (a == "-") ? 0 : a.replace(/,/, ".");
    var y = (b == "-") ? 0 : b.replace(/,/, ".");
    x = parseFloat(x);
    y = parseFloat(y);
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };

    // --- --- --- On formate le tableau avec le plugin DataTables --- --- --- \\
    $("#tabSalesAndOpport").dataTable({
    "bJQueryUI": true,
    "bFilter" : true,
    "bStateSave": true,
    "sPaginationType": "full_numbers",
    "aLengthMenu": [[10, 50, 100, 200, -1], [10, 50, 100, 200, "All"]],
    "iDisplayLength": 50,
    "aoColumns": [
    { "sType": "numeric" },
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    { "sType": "numeric-comma" },
    null,
    { "sType": "numeric-comma" },
    null,
    { "sType": "eu_date" },
    { "asSorting": "asc" }
    ]
    }).columnFilter({
    sPlaceHolder: "head:before",
    aoColumns: [
    null,
    { type: "text" },
    { type: "text" },
    { type: "text" },
    { type: "text" },
    { type: "text" },
    { type: "text" },
    { type: "text" },
    { type: "text" },
    { type: "text" },
    null,
    { type: "select" },
    null,
    null
    ]
    });
    [/code]

    But my textbox filters are on the headers and not before or after. I don't know what I have mistake :/ (see this image for sample : http://imagik.fr/uploads/48115)
    Have you an idea ?
    Thanks ;)
  • marcbertonemarcbertone Posts: 2Questions: 0Answers: 0
    I was wondering if its possible to setup a SELECT based filter where the text displayed in the menu is different than the value being passed back to the datable?

    For example in my database I use constants to represent different colors: 1=red, 2=orange, 3=yellow, 4=green, 5=blue. What I would like is a SELECT filter that displays the text (red, orange, yellow, green, blue) but when a value is selected the associated numeric value (1, 2, 3, 4, 5) is passed to the processing script.

    Im thinking it would look something like this, but I dont know if this syntax is correct or if its even possible:

    [code]
    ...
    .columnFilter(
    {
    sPlaceHolder: "foot:after",
    aoColumns: [
    { type: "select", values: [ "red" : 1, "orange" : 2, "yellow" : 3, "green" : 4, "blue" : 5] }
    ]
    }
    );
    ...
    [/code]
  • marcbertonemarcbertone Posts: 2Questions: 0Answers: 0
    Guess I should have read the source code before asking since I was able to figure it out on my own! For all others, here is the format that you are looking for:

    [code]
    { type: "select", values:
    [
    { "value" : 1, "label" : "red" },
    { "value" : 2, "label" : "orange" },
    { "value" : 3, "label" : "yellow" },
    { "value" : 4, "label" : "green" },
    { "value" : 5, "label" : "blue" }
    ]
    }
    [/code]
  • mmalmeidammalmeida Posts: 15Questions: 2Answers: 0
    [quote]ashishkulkarni said: Hi guys,



    I am facing an issue where if I use:



    Run in JS Bin?1sPlaceHolder: "head:before"


    or



    Run in JS Bin?1sPlaceHolder: "head:after"


    the filters appear inside the header row overwriting the contents of the header.



    The issue with that is if I use drop-downs - type: "select" - then at times, in addition to applying the filter, the table also gets sorted which is not the intention.



    Please advise.



    Best Regards,



    Ashish. [/quote]


    I am facing the same issue. Did you manage to overcome it?
  • randletrandlet Posts: 1Questions: 0Answers: 0
    Ashish & mmalmeida,

    I had the same problem with

    [code]sPlaceHolder: "head:after"[/code]

    and worked around it by using a second (identical) header row like so:

    [code]



    Header 1
    Header 2
    Header 3
    ....


    Header 1
    Header 2
    Header 3
    ....





    [/code]

    This places the sort arrows in the top row and the filter text boxes/selects in the second row. Works well for me!
  • MVecchiMVecchi Posts: 2Questions: 0Answers: 0
    Hi, i'm using the jquery datatables with column filter plug-in. In my scenario, users can generate an excel of the shown datas but, after postback the filter values are lost. So i'm implementing a javascript function to re-set the values but i can't use the .fnFilter() function because user can't see the filter values.. How can i do?

    Thanks,
    MV
  • jekinjekin Posts: 1Questions: 0Answers: 0
    edited February 2014
    Hi Jovan,

    Sorry I have been away after sending you the email, thanks for your response. I can't use personal email account at work so I am posting the code I added here for the multiselect feature on header filtering. The below code turns multiple choices into regular expression then call the DataTables standard fnFilter function.
    [code]
    function fnCreateMultiSelect(aData) {
    var index = i;
    var r = '', j, iLen = aData.length;

    for (j = 0; j < iLen; j++) {
    r += '' + aData[j] + '';
    }
    var select = $(r + '');
    th.html(select);
    th.wrapInner('');

    select.change(function () {
    if ($(this).val() != "") {
    $(this).removeClass("search_init");
    } else {
    $(this).addClass("search_init");
    }
    var selectedOptions = $(this).val();
    var asEscapedFilters = [];
    if(selectedOptions==null || selectedOptions==[]){
    var re = '^(.*)$';
    }else{
    $.each( selectedOptions, function( i, sFilter ) {
    asEscapedFilters.push( fnRegExpEscape( sFilter ) );
    } );
    var re = '^(' + asEscapedFilters.join('|') + ')$';
    }

    oTable.fnFilter( re, index, true, false );
    });
    }

    function fnRegExpEscape( sText ) {
    return sText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    };
    [/code]

    Then in
    [code]
    $.fn.columnFilter = function (options) {
    ...
    case "select":
    fnCreateSelect(aoColumn.values);
    break;
    case "multiselect":
    fnCreateMultiSelect(aoColumn.values);
    break;
    case "number-range":
    fnCreateRangeInput();
    break;
    [/code]

    The above code will create standard HTML multiple selects, but of course I would like something nicer so I converted them into jQuery.multiselect later:
    [code]
    $("table#example thead tr th.filterHeader").find("select").multiselect({
    selectedList: 1,
    multiple: true,
    minWidth: "110",
    height: "auto"
    }).multiselectfilter();
    [/code]

    Regards,
    James
  • koosvdkolkkoosvdkolk Posts: 169Questions: 0Answers: 0
    Will this plugin be supported in the upcoming 1.10 version of Datatables?
  • SigalSigal Posts: 8Questions: 1Answers: 0
    Hello,

    I am trying to use this plugin but the filter field does not display.

    My jquery code:
    [code]oTable = $('#tasksTbl').dataTable({
    "bProcessing": true,
    "bDestroy": true,
    "sAjaxSource": "/modules/project_manager/ajax/list_project_tasks.ajax.php?project_id="+project_id,
    "bAutoWidth": false,
    "aoColumns": [
    { "bSortable": true, "sWidth": "5%" },
    { "bSortable": true, "sWidth": "35%" },
    { "bSortable": false, "sWidth": "15%" },
    { "bSortable": false, "sWidth": "10%" },
    { "bSortable": false, "sWidth": "5%" },
    { "bSortable": false, "sWidth": "5%" },
    { "bSortable": false, "sWidth": "5%" },
    { "bSortable": false, "sWidth": "15%" }
    ]
    });

    oTable.columnFilter({
    "aoColumns": [
    null,
    { type: "select", values: [ 'A', 'B', 'C' ]},
    null,
    null,
    null,
    null,
    null,
    null
    ]
    });[/code]

    My html:
    [code]


    Id
    Task Title
    Status
    Assigned To





    [/code]

    The table displays fine, but no select filter is added to the Status column.

    Can anyone please help?
This discussion has been closed.