imqishi / jquery-datatables-column-filter Goto Github PK

If you load a table which is using Ajax sourced data (just sAjaxSource, not 
server-side processing - although that would suffer from a similar issue - but 
different solution...) and have a "select" input which doesn't have the options 
predefined, the auto detection of the column information fails, since there is 
no data in the table when it loads initially.

The way to overcome this is by attaching a draw callback function to the table, 
and looking for the second draw (i.e. iDraw==2), which occurs when the data has 
been loaded. At that point, the column filter select can be built based on the 
information available.

Attached is a patch for getting this to work as described above.

In many cases the date in one table have this format (Day/Month/Year 
Hour:minute) or (Year/Month/Day Hour:minute). I think that is good tip specify 
the format of the date and create a data-range filter based on the format. With 
this option We couldn't worry to part the date on two <td>

Kind Regards and sorry for my english

What steps will reproduce the problem?
1. Make table containing a column with date data
2. Populate with data, some of which has a null/empty date
3. Filter any column
4. Clear filter

What is the expected output? What do you see instead?
I expect to see the data return to unfiltered state. Instead all rows having 
null or empty dates are missing. They do not return after clearing the filter.


What version of the product are you using? On what operating system?
1.2.1 from trunk, jquery 1.6.2, datatables 1.8.1

I am having trouble getting external form elements to display in a sidebar.

I am following the example given at 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html

1. Column filter is working correctly in the table footer when I leave out the 
code for the external form. Here is the working table 
http://adevno.com/dev/propertysearch/working.php

2. I add in the following code but the form elements are not showing. Here is 
the page with the code I have added 
http://adevno.com/dev/propertysearch/index.php

I am adding this to the javascript:
{
aoColumns: [{
  type: "select",
  sSelector: "#CITY"
}, {
  type: "select",
  sSelector: "#STATE"
}, {
  sSelector: "#ZIP"
}, {
  type: "select",
  values: ["King", "Bonner", "Island"],
  sSelector: "#COUNTY"
}]
}

And I add these placeholders in the sidebar:

<p id="CITY"></p>
<p id="STATE"></p>
<p id="ZIP"></p>
<p id="COUNTY"></p>

What am I missing? I have been running in circles on this for a few hours. Any 
help would be greatly appreciated.

I have your existing makeEditable plugin. How do I use the colummn filter with 
it? I can see the column names below but they are not enabled (just text).

Thanks.

What steps will reproduce the problem?

Using the code below the text input will not work. 

"$(document).ready( function () {
            $('#example').dataTable().columnFilter(
                      {sPlaceHolder: 'head:after',
                        aoColumns: [
                          {type: 'text'},
                          ]});      
            });"

Indeed, this produces a "class=sorting" element instead than "class=filter 
text".

What is the expected output? What do you see instead?

Input editable text box for searching the column. Instead, I get a non editable 
text box that sorts when clicked.

What version of the product are you using? On what operating system?

0.9.0

Please provide any additional information below.

What steps will reproduce the problem?
1. Use data with escapable characters.
2. Filter fails.

What is the expected output? What do you see instead?
Shown   : <option value="Avedis Zildjian " 17&quot;&quot;>Avedis Zildjian 
&quot;17&quot;</option>
Expected: <option value="Avedis%20Zildjian%20%2217%22">Avedia Zildjian 
"17"</option>

What version of the product are you using? On what operating system?
v1.2.1

Potential fix:
Line 155: r += '<option value="' + escape(aData[j]) + '">' + aData[j] 
+ '</option>';

Line 168: oTable.fnFilter(unescape($(this).val()), index);

Filtering itselfs works like a charm. Except I need the select boxes outside my 
table in a div above the main table, not in the thead or tfoot.

Any idea how I can do this ?

tnx
Rob

What steps will reproduce the problem?
1.
"fnInitComplete": function(){
$('td', this.fnGetNodes()).dblclick( function(){
alert($(this).text(););
});

What is the expected output? What do you see instead?
after using any server-side sort, the fnInitComplete does not work anymore.
i don't know if its an issue with this extension or datatables in general that 
makes the problem.

What version of the product are you using? On what operating system?
datatables 1.9.0
yours 1.4.1

Please provide any additional information below.
ask if anything needed

What steps will reproduce the problem?
Trying to use a regular expression with a 'select' filter. Something like the 
following:

var valueList = [];
valueList.push({ value: '^foobar$', label: 'foobar'});
oTable.columnFilter( {
    "sPlaceHolder": "head:after",
    "aoColumns":  [
        {
            type: "select",
            values: valueList,
            bRegex: true
        }]});



When I select "foobar" from my table, nothing is matched because the datatable 
fnFilter did not have "true" specificed for the third parameter.

I was using the latest trunk (r57, 1.4.1).

Fixing this was pretty simple. I've attached a patch which solves the problem.

What steps will reproduce the problem?
1. Open column filtering .js file
2. Check instructions for sPlaceholder vs. value script looks for
3. Notice values are not the same

It depends what version of the .js I am looking at (.9 or 1.2.1) but there 
seems a disconnect between instructions and what the code actually looks for as 
a value

What steps will reproduce the problem?
1. Setup a datable with columnFilter and colVis 
2. Hide one or more columns
3. Try to filter and errors will be generated

The solution is to look for all oTable.fnFilter() instances and in each case 
replace the 'index' variable with:
oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(),index)

For example, replace:
oTable.fnFilter($(this).val(), index);
with:
oTable.fnFilter($(this).val(), 
oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(),index));

Basically filtering should occur only on Visible columns, not all columns.

1. I need to display popup image(Balloontip.js) inside the  jquery datatables
2. Image pop-up working fine for first page, but when I go to next page then 
this ballontip.js doesn't work i,e no popup image .


I am in deep problem plz help me ,ballontip.js not working while I navigate to 
next page .plz plz help me!
I am running all on linux ,PHP

 function fnCreateInput(regex, smart, bIsNumber) {
        var sCSSClass = "text_filter";
        if (bIsNumber)
            sCSSClass = "number_filter";
        var input = $('<input type="text" class="search_init ' + sCSSClass + '" value="' + label + '"/>');


=====>

 function fnCreateInput(regex, smart, bIsNumber) {
        var sCSSClass = "text_filter";
        if (bIsNumber)
            sCSSClass = "number_filter";
        label = label.replace(/(^\s*)|(\s*$)/g, "");
        var input = $('<input type="text" class="search_init ' + sCSSClass + '" value="' + label + '"/>');

What steps will reproduce the problem?
1. Create a page with two datatables, with different column names (e.g ["A1", 
"A2"] and ["B1", "B2"], and both using column-filter. 
2. First initialize A-table, then B-table
2. Enter something into a col-filter in A-table col A1, and delete it again


What is the expected output? What do you see instead?
Expected is that the text "A1" reappears in the filter input box, but instead I 
see "B1". 

What version of the product are you using? On what operating system?
Chrome/ubuntu

Please provide any additional information below.
I think this is due to the initialization doen in 
jquery.dataTables.columnFilter.js:


    $.fn.columnFilter = function (options) {

        var asInitVals, i, label, th;

Since this function is only created when the script is loaded, effectively this 
makes the variable "asInitVals" a global resource which is shared by both 
datatables, making the latter initialization of B-table overwrite the initvals 
for the A-table. 

This is an EXCELLENT plug in for datatables.  I would very much like to be able 
to specify which columns would get the individual column filter boxes.  I will 
have some columns in my table that have images in them and would like to remove 
the filter box from those if possible.

DataTable Version 1.9
Column Filter Version 0.9.0
Uncaught TypeError: Cannot read property 'sServerMethod' of undefined

What steps will reproduce the problem?
1. Have bStateSave = true
2. Hide columns using ColVis
3. Refresh page
4. Unhide columns
4. The column-filter options will not be in the footer

It looks like if the column is hidden then the filter is not added once the 
column is unhidden. 

1.  Create any table 
2.  Make a button to reload this table
3.  Run the table and enter a criteria to filter something
4.  Reload the table, see that the column filter boxes are shown empty
5.  See that the content is still filtered, filter is only removed if box is 
focused and entered any new key

Reproducible on any browser, tested on Chrome and Opera.

What is the expected output? What do you see instead?

Make it an setup option. I use the state cookie of datatables. Very nice, 
columnfilter should append to that and display correctly or not use state 
saving at all.

This is not a problem, just an enhancement request!!

I would love for my aoColumns object to look like this:
aoColumns: [
  { type: "text" },
  { type: "text", width: "150px" },
  { type: "select", width: "150px" },
  null,
  null
  ]

I have added this functionality to your plugin, but I'm no JS expert so I'm 
sure you could do it better!  I have attached my updated copy of version 1.4.0

Thanks!
Chris

P.S.  It would be great if you could update the zip file under the "Downloads" 
link.  It includes version 0.9.0, not the latest

I suspect that perhaps I'm missing some configuration parameter, but when I use 
the select based filters and I do a page refresh, the saved state of the page 
is not being reflected in the filter selects.

So if I select a particular item in the list the filter by, then refresh the 
page, the select list goes back to the first entry in the list even though the 
table data is still being filtered by the previously selected item.

I'm using server side processing if that is important, as well as the 
bSaveState = true option on the table.

What steps will reproduce the problem?
1. Setup ColumnFilter with number rangers
2. Use DataTables server side functionality
3. Filtering does not function

What is the expected output?
Functioning filters

What do you see instead?
Broken filters. The server side script receives "undefined~undefined" for all 
ranges regardless of entered values.
One of the sources of the problem can be observed by viewing this line:
                    return $("#range_from_" + index).val() + properties.sRangeSeparator + $("#range_to_" + index).val()
In unpatched 1.2.1 that corresponds to line 308.
Reviewing the rendered HTML that should be looking for something more along the 
lines of:
                    return $("#"+oTable.attr("id")+"_range_from_" + index).val() + properties.sRangeSeparator + $("#"+oTable.attr("id")+"_range_to_" + index).val();

Basically ColumnFilter renders the field with the ID prepended but then refers 
to it without when using Server Side. Beyond that for multiple ranges they all 
render with the same index. I am digging further but it appears that because of 
how the fnSearch_ function is pushed on unevaluated when they run they all run 
with the last index.

What version of the product are you using? On what operating system?
Version 1.2.1 from trunk

/*
* File:        jquery.dataTables.columnFilter.js
* Version:     1.4.1.
* Author:      Jovan Popovic 
* 
* Copyright 2011 Jovan Popovic, all rights reserved.
*
* This source file is free software, under either the GPL v2 license or a
* BSD style license, as supplied with this software.
* 
* This source file is distributed in the hope that it will be useful, but 
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY 
* or FITNESS FOR A PARTICULAR PURPOSE. 
* 
* Parameters:"
* @sPlaceHolder                 String      Place where inline filtering 
function should be placed ("tfoot", "thead:before", "thead:after"). Default is 
"tfoot"
* @sRangeSeparator              String      Separator that will be used when 
range values are sent to the server-side. Default value is "~".
* @sRangeFormat                 string      Default format of the From ... to 
... range inputs. Default is From {from} to {to}
* @aoColumns                    Array       Array of the filter settings that 
will be applied on the columns
*/
(function ($) {


    $.fn.columnFilter = function (options) {

        var asInitVals, i, label, th;

        //var sTableId = "table";
        var sRangeFormat = "From {from} to {to}";
        //Array of the functions that will override sSearch_ parameters
        var afnSearch_ = new Array();
        var aiCustomSearch_Indexes = new Array();

        var oFunctionTimeout = null;

        var fnOnFiltered = function () { };

        function _fnGetColumnValues(oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
            ///<summary>
            ///Return values in the column
            ///</summary>
            ///<param name="oSettings" type="Object">DataTables settings</param>
            ///<param name="iColumn" type="int">Id of the column</param>
            ///<param name="bUnique" type="bool">Return only distinct values</param>
            ///<param name="bFiltered" type="bool">Return values only from the filtered rows</param>
            ///<param name="bIgnoreEmpty" type="bool">Ignore empty cells</param>

            // check that we have a column id
            if (typeof iColumn == "undefined") return new Array();

            // by default we only wany unique data
            if (typeof bUnique == "undefined") bUnique = true;

            // by default we do want to only look at filtered data
            if (typeof bFiltered == "undefined") bFiltered = true;

            // by default we do not wany to include empty values
            if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;

            // list of rows which we're going to loop through
            var aiRows;

            // use only filtered rows
            if (bFiltered == true) aiRows = oSettings.aiDisplay;
            // use all rows
            else aiRows = oSettings.aiDisplayMaster; // all row numbers

            // set up data array    
            var asResultData = new Array();

            for (var i = 0, c = aiRows.length; i < c; i++) {
                iRow = aiRows[i];
                var aData = oTable.fnGetData(iRow);
                var sValue = aData[iColumn];

                // ignore empty values?
                if (bIgnoreEmpty == true && sValue.length == 0) continue;

                // ignore unique values?
                else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

                // else push the value onto the result data array
                else asResultData.push(sValue);
            }

            return asResultData;
        }

        function _fnColumnIndex(iColumnIndex) {
            if (properties.bUseColVis)
                return iColumnIndex;
            else
                return oTable.fnSettings().oApi._fnVisibleToColumnIndex(oTable.fnSettings(), iColumnIndex);
            //return iColumnIndex;
            //return oTable.fnSettings().oApi._fnColumnIndexToVisible(oTable.fnSettings(), iColumnIndex);
        }

        function fnCreateInput(oTable, regex, smart, bIsNumber, iFilterLength, iSize) {
            var sCSSClass = "text_filter";
            if (bIsNumber)
                sCSSClass = "number_filter";

            label = label.replace(/(^\s*)|(\s*$)/g, "");
            var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch;
            var search_init = 'search_init ';
            var inputvalue = label;
            if(currentFilter != '' && currentFilter != '^') {
            if(bIsNumber && currentFilter.charAt(0) == '^')
                inputvalue = currentFilter.substr(1); //ignore trailing ^
        else
                    inputvalue = currentFilter;
                search_init = '';
            }

            var input = $('<input type="text" size="'+iSize+'" class="' + search_init + sCSSClass + '" value="' + inputvalue + '"/>');
            th.html(input);
            if (bIsNumber)
                th.wrapInner('<span class="filter_column filter_number" />');
            else
                th.wrapInner('<span class="filter_column filter_text" />');
            asInitVals[i] = label;
            var index = i;

            if (bIsNumber && !oTable.fnSettings().oFeatures.bServerSide) {
                input.keyup(function () {
                    /* Filter on the column all numbers that starts with the entered value */
                    oTable.fnFilter('^' + this.value, _fnColumnIndex(index), true, false);//Issue 37
                    fnOnFiltered();
                });
            } else {
                input.keyup(function () {
                    if(oTable.fnSettings().oFeatures.bServerSide && iFilterLength!=0) {
                //If filter length is set in the server-side processing mode
                //Check has the user entered at least iFilterLength new characters

                        var currentFilter = oTable.fnSettings().aoPreSearchCols[index].sSearch;
                        var iLastFilterLength = $(this).data("dt-iLastFilterLength");
                if(typeof iLastFilterLength == "undefined")
                    iLastFilterLength = 0;
                var iCurrentFilterLength = this.value.length;
                if( Math.abs(iCurrentFilterLength - iLastFilterLength) < iFilterLength
                    //&& currentFilter.length == 0 //Why this?
                    )
                {
                    //Cancel the filtering
                    return;
                }
                else
                {
                    //Remember the current filter length
                    $(this).data("dt-iLastFilterLength", iCurrentFilterLength );    
                }
                    }
                    /* Filter on the column (the index) of this element */
                    oTable.fnFilter(this.value, _fnColumnIndex(index), regex, smart);//Issue 37
                    fnOnFiltered();
                });
            }

            input.focus(function () {
                if ($(this).hasClass("search_init")) {
                    $(this).removeClass("search_init");
                    this.value = "";
                }
            });
            input.blur(function () {
                if (this.value == "") {
                    $(this).addClass("search_init");
                    this.value = asInitVals[index];
                }
            });
        }

        function fnCreateRangeInput(oTable) {

            th.html(_fnRangeLabelPart(0));
            var sFromId = oTable.attr("id") + '_range_from_' + i;
            var from = $('<input type="text" class="number_range_filter" id="' + sFromId + '" rel="' + i + '"/>');
            th.append(from);
            th.append(_fnRangeLabelPart(1));
            var sToId = oTable.attr("id") + '_range_to_' + i;
            var to = $('<input type="text" class="number_range_filter" id="' + sToId + '" rel="' + i + '"/>');
            th.append(to);
            th.append(_fnRangeLabelPart(2));
            th.wrapInner('<span class="filterColumn filter_number_range" />');
            var index = i;
            aiCustomSearch_Indexes.push(i);



            //------------start range filtering function


            /*  Custom filtering function which will filter data in column four between two values
            *   Author:     Allan Jardine, Modified by Jovan Popovic
            */
            //$.fn.dataTableExt.afnFiltering.push(
            oTable.dataTableExt.afnFiltering.push(
            function (oSettings, aData, iDataIndex) {
                if (oTable.attr("id") != oSettings.sTableId)
                    return true;
                var iMin = document.getElementById(sFromId).value * 1;
                var iMax = document.getElementById(sToId).value * 1;
                var iValue = aData[_fnColumnIndex(index)] == "-" ? 0 : aData[_fnColumnIndex(index)] * 1;
                if (iMin == "" && iMax == "") {
                    return true;
                }
                else if (iMin == "" && iValue <= iMax) {
                    return true;
                }
                else if (iMin <= iValue && "" == iMax) {
                    return true;
                }
                else if (iMin <= iValue && iValue <= iMax) {
                    return true;
                }
                return false;
            }
        );
            //------------end range filtering function



            $('#' + sFromId + ',#' + sToId, th).keyup(function () {

                var iMin = document.getElementById(sFromId).value * 1;
                var iMax = document.getElementById(sToId).value * 1;
                if (iMin != 0 && iMax != 0 && iMin > iMax)
                    return;

                oTable.fnDraw();
                fnOnFiltered();
            });


        }


        function fnCreateDateRangeInput(oTable) {
            th.html(_fnRangeLabelPart(0));
            var sFromId = oTable.attr("id") + '_range_from_' + i;
            var from = $('<input type="text" class="date_range_filter" id="' + sFromId + '" rel="' + i + '"/>');
            from.datepicker();
            th.append(from);
            th.append(_fnRangeLabelPart(1));
            var sToId = oTable.attr("id") + '_range_to_' + i;
            var to = $('<input type="text" class="date_range_filter" id="' + sToId + '" rel="' + i + '"/>');
            th.append(to);
            th.append(_fnRangeLabelPart(2));
            th.wrapInner('<span class="filterColumn filter_date_range" />');
            to.datepicker();
            var index = i;
            aiCustomSearch_Indexes.push(i);


            //------------start date range filtering function

            //$.fn.dataTableExt.afnFiltering.push(
            oTable.dataTableExt.afnFiltering.push(
            function (oSettings, aData, iDataIndex) {
                if (oTable.attr("id") != oSettings.sTableId)
                    return true;

                var dStartDate = from.datepicker("getDate");

                var dEndDate = to.datepicker("getDate");

                if (dStartDate == null && dEndDate == null) {
                    return true;
                }

                var dCellDate = null;
                try {
                    if (aData[_fnColumnIndex(index)] == null || aData[_fnColumnIndex(index)] == "")
                        return false;
                    dCellDate = $.datepicker.parseDate($.datepicker.regional[""].dateFormat, aData[_fnColumnIndex(index)]);
                } catch (ex) {
                    return false;
                }
                if (dCellDate == null)
                    return false;


                if (dStartDate == null && dCellDate <= dEndDate) {
                    return true;
                }
                else if (dStartDate <= dCellDate && dEndDate == null) {
                    return true;
                }
                else if (dStartDate <= dCellDate && dCellDate <= dEndDate) {
                    return true;
                }
                return false;
            }
        );
            //------------end date range filtering function

            $('#' + sFromId + ',#' + sToId, th).change(function () {
                oTable.fnDraw();
                fnOnFiltered();
            });


        }

        function fnCreateColumnSelect(oTable, aData, iColumn, nTh, sLabel) {
            if (aData == null)
                aData = _fnGetColumnValues(oTable.fnSettings(), iColumn, true, false, true);
            var index = iColumn;
            var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch;

            var r = '<select class="search_init select_filter"><option value="" class="search_init">' + sLabel + '</option>';
            var j = 0;
            var iLen = aData.length;
            for (j = 0; j < iLen; j++) {
                if (typeof (aData[j]) != 'object') {
                    var selected = '';
                    if(escape(aData[j]) == currentFilter) selected = 'selected '
                    r += '<option ' + selected + ' value="' + escape(aData[j]) + '">' + aData[j] + '</option>';
                }
                else {
                    var selected = '';
                    if(escape(aData[j].value) == currentFilter) selected = 'selected '
                    r += '<option ' + selected + 'value="' + escape(aData[j].value) + '">' + aData[j].label + '</option>';
                }
            }

            var select = $(r + '</select>');
            nTh.html(select);
            nTh.wrapInner('<span class="filterColumn filter_select" />');
            select.change(function () {
                //var val = $(this).val();
                if ($(this).val() != "") {
                    $(this).removeClass("search_init");
                } else {
                    $(this).addClass("search_init");
                }
                oTable.fnFilter(unescape($(this).val()), iColumn); //Issue 37
                fnOnFiltered();
            });
        }

        function fnCreateSelect(oTable, aData) {
            var oSettings = oTable.fnSettings();
            if (aData == null && oSettings.sAjaxSource != "" && !oSettings.oFeatures.bServerSide) {
                // Add a function to the draw callback, which will check for the Ajax data having 
                // been loaded. Use a closure for the individual column elements that are used to 
                // built the column filter, since 'i' and 'th' (etc) are locally "global".
                oSettings.aoDrawCallback.push({
                    "fn": (function (iColumn, nTh, sLabel) {
                        return function () {
                            // Only rebuild the select on the second draw - i.e. when the Ajax
                            // data has been loaded.
                            if (oSettings.iDraw == 2 && oSettings.sAjaxSource != null && oSettings.sAjaxSource != "" && !oSettings.oFeatures.bServerSide) {
                                return fnCreateColumnSelect(oTable, null, _fnColumnIndex(iColumn), nTh, sLabel); //Issue 37
                            }
                        };
                    })(i, th, label),
                    "sName": "column_filter_" + i
                });
            }
            // Regardless of the Ajax state, build the select on first pass
            fnCreateColumnSelect(oTable, aData, _fnColumnIndex(i), th, label); //Issue 37

            /*
            var fnOnFilteredCurrent = fnOnFiltered;
            fnOnFiltered = function(){
            fnCreateColumnSelect(oTable, aData, i, th, label);
            fnOnFilteredCurrent();
            };*/

        }

        function fnCreateCheckbox(oTable, aData) {

            if (aData == null)
                aData = _fnGetColumnValues(oTable.fnSettings(), i, true, true, true);
            var index = i;

            var r = '', j, iLen = aData.length;

            //clean the string
            var localLabel = label.replace('%', 'Perc').replace("&", "AND").replace("$", "DOL").replace("£", "STERL").replace("@", "AT").replace(/\s/g, "_");
            localLabel = localLabel.replace(/[^a-zA-Z 0-9]+/g, '');
            //clean the string

            //button label override
            if (properties.sFilterButtonText != null || properties.sFilterButtonText != undefined) {
                labelBtn = properties.sFilterButtonText;
            } else {
                labelBtn = label;
            }

            var relativeDivWidthToggleSize = 10;
            var numRow = 12; //numero di checkbox per colonna
            var numCol = Math.floor(iLen / numRow);
            if (iLen % numRow > 0) {
                numCol = numCol + 1;
            };

            //count how many column should be generated and split the div size
            var divWidth = 100 / numCol - 2;

            var divWidthToggle = relativeDivWidthToggleSize * numCol;

            if (numCol == 1) {
                divWidth = 20;
            }

            var divRowDef = '<div style="float:left; min-width: ' + divWidth + '%; " >';
            var divClose = '</div>';

            var uniqueId = oTable.attr("id") + localLabel;
            var buttonId = "chkBtnOpen" + uniqueId;
            var checkToggleDiv = uniqueId + "-flt-toggle";
            r += '<button id="' + buttonId + '" class="checkbox_filter" > ' + labelBtn + '</button>'; //filter button witch open dialog
            r += '<div id="' + checkToggleDiv + '" '
                + 'title="' + label + '" '
                + 'class="toggle-check ui-widget-content ui-corner-all"  style="width: ' + (divWidthToggle) + '%; " >'; //dialog div
            //r+= '<div align="center" style="margin-top: 5px; "> <button id="'+buttonId+'Reset" class="checkbox_filter" > reset </button> </div>'; //reset button and its div
            r += divRowDef;

            for (j = 0; j < iLen; j++) {

                //if last check close div
                if (j % numRow == 0 && j != 0) {
                    r += divClose + divRowDef;
                }

                //check button
                r += '<input class="search_init checkbox_filter" type="checkbox" id= "' + aData[j] + '" name= "' + localLabel + '" value="' + aData[j] + '" >' + aData[j] + '<br/>';

                var checkbox = $(r);
                th.html(checkbox);
                th.wrapInner('<span class="filterColumn filter_checkbox" />');
                //on every checkbox selection
                checkbox.change(function () {

                    var search = '';
                    var or = '|'; //var for select checks in 'or' into the regex
                    var resSize = $('input:checkbox[name="' + localLabel + '"]:checked').size();
                    $('input:checkbox[name="' + localLabel + '"]:checked').each(function (index) {

                        //search = search + ' ' + $(this).val();
                        //concatenation for selected checks in or
                        if ((index == 0 && resSize == 1)
                                || (index != 0 && index == resSize - 1)) {
                            or = '';
                        }
                        //trim
                        search = search.replace(/^\s+|\s+$/g, "");
                        search = search + $(this).val() + or;
                        or = '|';

                    });

                    for (var jj = 0; jj < iLen; jj++) {
                        if (search != "") {
                            $('#' + aData[jj]).removeClass("search_init");
                        } else {
                            $('#' + aData[jj]).addClass("search_init");
                        }
                    }

                    //execute search
                    oTable.fnFilter(search, index, true, false);
                    fnOnFiltered();
                });
            }

            //filter button
            $('#' + buttonId).button();
            //dialog
            $('#' + checkToggleDiv).dialog({
                //height: 140,
                autoOpen: false,
                //show: "blind",
                hide: "blind",
                buttons: [{
                    text: "Reset",
                    click: function () {
                        //$('#'+buttonId).removeClass("filter_selected"); //LM remove border if filter selected
                        $('input:checkbox[name="' + localLabel + '"]:checked').each(function (index3) {
                            $(this).attr('checked', false);
                            $(this).addClass("search_init");
                        });
                        oTable.fnFilter('', index, true, false);
                        fnOnFiltered();
                        return false;
                    }
                },
                            {
                                text: "Close",
                                click: function () { $(this).dialog("close"); }
                            }
                        ]
            });


            $('#' + buttonId).click(function () {

                $('#' + checkToggleDiv).dialog('open');
                var target = $(this);
                $('#' + checkToggleDiv).dialog("widget").position({ my: 'top',
                    at: 'bottom',
                    of: target
                });

                return false;
            });

            var fnOnFilteredCurrent = fnOnFiltered;

            fnOnFiltered = function () {
                var target = $('#' + buttonId);
                $('#' + checkToggleDiv).dialog("widget").position({ my: 'top',
                    at: 'bottom',
                    of: target
                });
                fnOnFilteredCurrent();
            };
            //reset
            /*
            $('#'+buttonId+"Reset").button();
            $('#'+buttonId+"Reset").click(function(){
            $('#'+buttonId).removeClass("filter_selected"); //LM remove border if filter selected
            $('input:checkbox[name="'+localLabel+'"]:checked').each(function(index3) {
            $(this).attr('checked', false);
            $(this).addClass("search_init");
            });
            oTable.fnFilter('', index, true, false);
            return false;
            }); 
            */
        }




        function _fnRangeLabelPart(iPlace) {
            switch (iPlace) {
                case 0:
                    return sRangeFormat.substring(0, sRangeFormat.indexOf("{from}"));
                case 1:
                    return sRangeFormat.substring(sRangeFormat.indexOf("{from}") + 6, sRangeFormat.indexOf("{to}"));
                default:
                    return sRangeFormat.substring(sRangeFormat.indexOf("{to}") + 4);
            }
        }




        oTable = this;

        var defaults = {
            sPlaceHolder: "foot",
            sRangeSeparator: "~",
            iFilteringDelay: 500,
            aoColumns: null,
            sRangeFormat: "From {from} to {to}"
        };

        properties = $.extend(defaults, options);

        return this.each(function () {

            if (!oTable.fnSettings().oFeatures.bFilter)
                return;
            asInitVals = new Array();
            var sFilterRow = "tfoot tr";
            if (properties.sPlaceHolder == "head:after") {
                var tr = $("thead tr:last", oTable).detach();
        if(oTable.fnSettings().bSortCellsTop)
        {
                    tr.appendTo($("thead", oTable));
        }
        else
            {
                tr.prependTo($("thead", oTable));
            }
                sFilterRow = "thead tr:last";
            } else if (properties.sPlaceHolder == "head:before") {
                var tr = $("thead tr:first", oTable).detach();
                //tr.attr("id", 1);
                if(oTable.fnSettings().bSortCellsTop)
                {
                    tr.appendTo($("thead", oTable));
                }
                else
                {
                tr.prependTo($("thead", oTable));
                }
                sFilterRow = "thead tr:first";
            }

            $(sFilterRow + " th", oTable).each(function (index) {
                i = index;
                var aoColumn = { type: "text",
                    bRegex: false,
                    bSmart: true,
                                        iSize: '',
                    iFilterLength: 0
                };
                if (properties.aoColumns != null) {
                    if (properties.aoColumns.length < i || properties.aoColumns[i] == null)
                        return;
                    aoColumn = properties.aoColumns[i];
                }
                label = $(this).text(); //"Search by " + $(this).text();
                if (aoColumn.sSelector == null)
                    th = $($(this)[0]);
                else {
                    th = $(aoColumn.sSelector);
                    if (th.length == 0)
                        th = $($(this)[0]);
                }

                if (aoColumn != null) {
                    if (aoColumn.sRangeFormat != null)
                        sRangeFormat = aoColumn.sRangeFormat;
                    else
                        sRangeFormat = properties.sRangeFormat
                    switch (aoColumn.type) {
                        case "number":
                            fnCreateInput(oTable, true, false, true, aoColumn.iFilterLength, aoColumn.iSize);
                            break;

                        case "select":
                            fnCreateSelect(oTable, aoColumn.values);
                            break;
                        case "number-range":
                            fnCreateRangeInput(oTable);
                            break;
                        case "date-range":
                            fnCreateDateRangeInput(oTable);
                            break;
                        case "checkbox":
                            fnCreateCheckbox(oTable, aoColumn.values);
                            break;
                        case "text":
                        default:
                            bRegex = (aoColumn.bRegex == null ? false : aoColumn.bRegex);
                            bSmart = (aoColumn.bSmart == null ? false : aoColumn.bSmart);
                            fnCreateInput(oTable, bRegex, bSmart, false, aoColumn.iFilterLength, aoColumn.iSize);
                            break;

                    }
                }
            });

            for (j = 0; j < aiCustomSearch_Indexes.length; j++) {
                //var index = aiCustomSearch_Indexes[j];
                var fnSearch_ = function () {
                    var id = oTable.attr("id");
                    return $("#" + id + "_range_from_" + aiCustomSearch_Indexes[j]).val() + properties.sRangeSeparator + $("#" + id + "_range_to_" + aiCustomSearch_Indexes[j]).val()
                }
                afnSearch_.push(fnSearch_);
            }

            if (oTable.fnSettings().oFeatures.bServerSide) {

                var fnServerDataOriginal = oTable.fnSettings().fnServerData;

                oTable.fnSettings().fnServerData = function (sSource, aoData, fnCallback) {

                    for (j = 0; j < aiCustomSearch_Indexes.length; j++) {
                        var index = aiCustomSearch_Indexes[j];

                        for (k = 0; k < aoData.length; k++) {
                            if (aoData[k].name == "sSearch_" + index)
                                aoData[k].value = afnSearch_[j]();
                        }
                    }
                    aoData.push({ "name": "sRangeSeparator", "value": properties.sRangeSeparator });

                    if (fnServerDataOriginal != null) {
                        try {
                            fnServerDataOriginal(sSource, aoData, fnCallback, oTable.fnSettings()); //TODO: See Issue 18
                        } catch (ex) {
                            fnServerDataOriginal(sSource, aoData, fnCallback);
                        }
                    }
                    else {
                        $.getJSON(sSource, aoData, function (json) {
                            fnCallback(json)
                        });
                    }

                    /*
                    if (fnServerDataOriginal != null) {
                    if (properties.iDelay != 0) {
                    if (oFunctionTimeout != null)
                    window.clearTimeout(oFunctionTimeout);
                    oFunctionTimeout = window.setTimeout(function () {
                    fnServerDataOriginal(sSource, aoData, fnCallback);
                    }, properties.iDelay);
                    } else {
                    fnServerDataOriginal(sSource, aoData, fnCallback);
                    }
                    }
                    else
                    $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json)
                    });
                    */
                };

            }

        });

    };




})(jQuery);

What steps will reproduce the problem?
1. Initialize datatable with option "bFilter": false
2. Use column filter along with this inititalization.


What is the expected output? What do you see instead?
It should remove Search option at top and individual column filter should work. 
But it just removes Search option and individual column filtering is not 
happening.


What version of the product are you using? On what operating system?
latest

Please provide any additional information below.

What steps will reproduce the problem?
1.
      $(document).ready(function() {
          $('#table').dataTable( {
              "aoColumnDefs": [ 
                { "bVisible": false, "aTargets": [ 1 ] }
            ] } ).columnFilter();
      } );

2. Try to filter column 1 or higher

3. Filter won't work properly.

What is the expected output? What do you see instead?
I expect the filter boxes to know that column 1 is hidden, and remove it from 
the filter logic.


What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1. include jquery.dataTables.js (v 1.8) and jquery.dataTables.columnFilter.js 
(v 1.2.1

2. initialize datatable with following code:

$('#datatable').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": window.location.pathname + "/datatable"
    }).columnFilter();

3. everything works, data is properly retrieved when filtering, sorting, 
paginating, BUT in firebug console there is an error: "settings is undefined" 
line 1342 in jquery.dataTables.js.

4. when i remove the columnFilter() initialization, the error goes away.

What steps will reproduce the problem?

I am using the following code to draw a JqueryUI slider which updates the 
values in two input boxes as shown below:-

//SLIDER

$(function() {
    var $slider = $('#Slider'),
    $lower = $('input#Min'),
    $upper = $('input#Max'),
    min_rent = 0,
    max_rent = 400;

$lower.val(min_rent);
$upper.val(max_rent);

$('#Slider').slider({
    orientation: 'horizontal',
    range: true,
    animate: 200,
    min: 0,
    max: 400,
    step: 1,
    value: 0,
    values: [min_rent, max_rent],
    slide: function(event,ui) {
        $lower.val(ui.values[0]);
        $upper.val(ui.values[1]);
    }
});

$lower.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    low = Math.min(low, high);
    $lower.val(low);
    $slider.slider('values', 0, low);
});

$upper.change(function () {
    var low = $lower.val(),
high = $upper.val();
    high = Math.max(low, high);
    $upper.val(high);
    $slider.slider('values', 1, high);
});


});




What is the expected output? What do you see instead?

When binding the update to input#Min and input#Max the input values update 
correctly.

However, if I set those to the two input boxes that are created by your plugin 
for Datatables, nothing happens.

I expected the Datatable to filter.


Please provide any additional information below.

Essentially I am just trying to use a slider to control the range filtering of 
my datatable.  If you know of any solution whatsoever I would be most grateful

What steps will reproduce the problem?
1. Implement the general data-tables!
2. Problem: Add more than 5 columns.

What is the expected output? What do you see instead?

The expected result should be colored and visible.
In my case it is blank!


What version of the product are you using? On what operating system?

jquery.js
complete.min.js
js/jquery.dataTables.min.js


site_jui.ccss.css
media/css/demo_table_jui.css
media/css/jquery-ui-1.7.2.custom.css

Please provide any additional information below.

I attached a file, as an example of what's wrong.

Column filters are shift to the left, due to new column created to allow row 
expand to show details.

How can we fix that ?!

What steps will reproduce the problem?
1. add the sPlaceHolder parameter to head:before/after
2.
3.

What is the expected output? What do you see instead?
the search box move to the top just as if it was the default behavior @ tfoot. 

The search boxes do move to the top, but the "sorting" function also moved as 
part of the search box.  So when click on the "Text" box, it will sort that 
column.  Please see attachment  I tried to follow the instruction and added 
duplicate section of header.  e.g

<thead>
<tr>
<th> Example 1</th>
</tr>
<tr> Example 1</th>
</tr>
</thead>

This does create the search box but it's not displaying correctly

What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1. set type to null

What is the expected output? What do you see instead?
I expect no filter for that column.
I get a text filter for that column.

What version of the product are you using? On what operating system?
r58

Please provide any additional information below.

I need to get other values than the description in my select options

<option val="20142">My description</option>

any idea how to do this ?

Tnx
Rob

I have this filter:

 /*state*/   { type: "select", values: [ 'Active', 'Dead', 'Inactive']  },

if I type 'active' in the column filter box for the above, the 'Inactive' 
matches are also returned when I just need 'Active' to be matched.

1.  Look in the live examples.

2.  View source.

3.  Click link to .js file for column filters

4.  See version 1.2.1

However when I got to the downloads, the version that is downloaded is 0.9.  
Not sure which is the best to use.

What steps will reproduce the problem?
1. include sScrollY argument 

What is the expected output? What do you see instead?
sScrollY works (produce a scrollbar) but column filter boxes becomes text (not 
entry boxes).

What version of the product are you using? On what operating system?

latest version taken last night.  

Please provide any additional information below.

sScrollY is essential for infinite scrolling.

What steps will reproduce the problem?
1. Make table containing a column with date data
2. Populate with data, some of which has a null
3. Filter/sort the date column
4. Observe "Uncaught Invalid arguments" error

What version of the product are you using? On what operating system?
Heavily patched 1.2.1

Please provide any additional information below.
I narrowed the problem down to this:

                var dCellDate = $.datepicker.parseDate($.datepicker.regional[""].dateFormat, aData[index]);

When aData[index] is null value, the above mentioned error is thrown. 
Extracting just that line allowed me to test a few things and I have observed 
the following:
- Null value: Uncaught Invalid arguments
- 0000-00-00: Uncaught Invalid date (When pulling dates from MySQL)
- 0001-01-01: Parses without error but is incorrectly parsed as 2001-01-01

When trying to fix this by setting null dates to "", I rediscovered Issue 21. 
All rows containing null dates then dissapear. The only solution I have found 
so far is to set null or empty dates to a valid date string, ie: 1111-11-11
Quick note that 0001-01-01 incorrectly gets parsed as 2001, 1001-01-01  parses 
correctly however.
My present solution is this:

                    // We must take into account null dates, empty dates and "zero" MySQL dates
                    if (aData[index] == null || aData[index] == "0000-00-00" || aData[index] == "") {
                        aData[index] = "1111-11-11";
                    }
                var dCellDate = $.datepicker.parseDate($.datepicker.regional[""].dateFormat, aData[index]);

This also solves Issue 21 but is a rather ugly hack. As long as you do not have 
dates prior to whatever you are using as your alternative to 
0000-00-00/null/empty dates, you should be fine. You also have to accept that 
null/empty dates are then treated in sorting as your "oldest" date.

I apologize for the lack of diff format but I have so many changes done to 
vanilla 1.2.1 that are from various bug fixes or added functionality that it 
would be futile.

What steps will reproduce the problem?
1. Create a table with one column with number range filter
2. Fill in the range from and to filters
3. Watch the request parameters for that column filter value and you'll notice 
that its value is "undefined~undefined"

What version of the product are you using? On what operating system?
0.9.0

Please provide any additional information below.
This happens because input values selectors are not using the table ID:

$("#range_from_" + index)
instead of
$("#" + sTableId + "range_from_" + index)

What steps will reproduce the problem?
1. latest 1.2 js release
2. multi tables example html
3. look at the 3rd table, Company ID

range should be inclusive e.g. 17-19 should include 17,18,19
Now, it only has 18.
Same problem for the Number of Employees ranges.



What version of the product are you using? On what operating system?
1.2 js taken from trunk today. 

Please provide any additional information below.
Thanks, this is a valuable plugin.

If you change the example Javascript in "index.html" in the download package to:

$(document).ready(function(){
     $('#example').dataTable({aoColumnDefs:[{"bVisible": false, aTargets: [0]}]})
          .columnFilter({
            aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                     { type: "text" },
                     null,
                     { type: "number" },
                     { type: "select", values: [ 'A', 'C', 'U', 'X']  }
                ]

        });
});

Then the bVisible option causes problems for the filtering. The second column 
is given the select options rather than the first (hidden) column.

DataTables has two internal functions which might be handy here: 
_fnVisibleToColumnIndex and _fnColumnIndexToVisible.

What steps will reproduce the problem?
1. add numeric range column filter

What is the expected output?
 $_POST['sSearch_7']: '0~9999'

What do you see instead?
 $_POST['sSearch_7']: 'undefined~undefined'

What version of the product are you using? On what operating system?
1. jQuery 1.6.1
2. jquery.dataTables 1.8.0
3. Ubuntu 11.04 x64
4. Firefox 5

I change code at line 305 to this:

for (j = 0; j < aiCustomSearch_Indexes.length; j++) {
  var index = aiCustomSearch_Indexes[j];
  var tablePrefix = oTable.attr("id");
  var fnSearch_ = function () {
    return $("#" + tablePrefix + "_range_from_" + index).val() + properties.sRangeSeparator + $("#" + tablePrefix + "_range_to_" + index).val()
  }
  afnSearch_.push(fnSearch_);
}

What steps will reproduce the problem?
1. Create one table with 'date-range' filters
2. Create another one, without those filters
3. Second table will crash on sorting, as it tries to sort by 'date-range' 
while there are no such columns there.

What steps will reproduce the problem?
1. Use "aoColumnDefs": [ { "bVisible": false, "aTargets": [ 2 ] }]
2. On the client side the column appears for 2 seconds and only then disappear

I expected it not to appear at all. What happens is that it takes the table a 
few seconds to complete it apparel. 


I am using the WP-Table-reloaded plugin on Ubuntu.

What steps will reproduce the problem?
1. create 3 tables with server side processing and column filters 
2. enter search text for one of the column boxes in the first or second table

What is the expected output? What do you see instead?

The column with the entered search criteria

What version of the product are you using? On what operating system?

PHP 5.3.2, Apache, Chrome / Firefox

Please provide any additional information below.

If search criteria is entered in the column filters for last table on the page, 
the behaviour is correct. If the search criteria is entered on any other column 
filter for the previous tables, the AjaxSource invoked is always the one 
defined for the last table and not the one for the corresponding table. All 
other datatables features like sorting seems to work correctly. 

Hi i made this function to add a toggle checklist that accept multiple values 
as input in OR (if you check 2 elements you will see the matching results of 
both).

It's my first js script so it could be better...sorry about that.

the functions is attached in the file "columnFilter.checkbox.js".
this should be added to the main js script (jquery.dataTables.columnFilter.js).

then in the switch near lines 340 add this case:

case "checkbox":
     fnCreateCheckbox(oTable, aoColumn.values);
     break;

it will accept arrays of values just like "select".

example:

$('#table').dataTable().columnFilter(
{aoColumns: [
{ type: "checkbox", values: [ 'NAME1', 'NAME2']  },
{ type: "select", values: [ 'Gecko', 'Trident'] } ]});

Important you need to add this style:

  <style type="text/css">

    .toggle-check {
         overflow: auto; 
         clear: both; 
         bottom:10%;
         left:0;
         text-align: left;
         position: absolute; 
         z-index: 99997;
    }

  </style>

P.S. if the main developer wants i could merge it via SVN.

What steps will reproduce the problem?
1. Enable "bServerSide": true, in DataTables initialization.



What is the expected output? What do you see instead?

I expect filters to work correctly, instead they all return 0 results.

What version of the product are you using? On what operating system?

ColumnFilter 1.3.0

Please provide any additional information below.

I am using the example PHP script from the DataTables website for server side 
processing.  Without "bServerSide": true, enabled everything works as expected 
with the columnfilter plugin.  All my text filters, range filters, select 
filters are all perfectly operable.  However due to the need for large datasets 
(20,000+) I would like to use server side processing.  When I set 
"bServerSide": true, any searches return 0 results, and when the search text is 
removed, does not return to the full dataset.

When I disable the columnfilter initialization code, server side processing 
works fine with the standard singular datatables search field.

I have attached a copy of my full datatables/columnfilter initialization code 
along with some jqueryUI slider code I am using to control the range filter.

What steps will reproduce the problem?
1. When I write in a text column filter, in server-side mode, I get the error. 
It seems like the the passing of three parameters to the fnServerData function 
is the problem. I think it has four parameters now?
2.
3.

What is the expected output? What do you see instead?
I expect that the data is filtered, but nothing happends

What version of the product are you using? On what operating system?
I am using the 1.8.1 version of datatables and the 1.2.1 of columnfilter

Please provide any additional information below.

added checkbox list column filter type

Hi,

imagine following scenario: In one of my columns I use some icons to visualize 
the state of my data. It would be nice to be also able to filter on those 
states. I'm able to add a select filter with the distinct filter values but 
clearly the filter won't work.
One other use case would be checkboxes which indicate true/false in sense of 
the data.

Is there any way to archive this with today functionality or would it possible 
to be able to provide a kind of "lookup" function to the filter in the future?


With kind regards,

Stefan

I am having trouble getting columnFilters to show the expected input fields 
anywhere near the table. On the other hand, both dataTables and rowGrouping do 
work with this table.

I have attached both the actual <table> I want to have filtered 
(generated-table.txt) and the JS code for $j(document).ready() 
(setting-up-table.txt).

Results are identical regardless of the actual aoColumns definition for 
columnFilter: there does not appear to be any change, but also no error 
message. So '.columnFilter()' also does not yield the expected result. Also, I 
do not get further when I leave out rowGrouping.

jquery.dataTables.columnFilter.js is loaded, as I could step into its code with 
firebug's js debugger.

I have dataTables 1.8.1, rowGrouping 1.0, and columnFilter 1.2.1 (but the same 
issue applies to columnFilter 0.9.0)

I hope this is something trivial like a not-well-enough-formed table or some 
other mistake on my part. How do I do this right?

Hi,

I'm using the column filter with selects filtering in a customers column. I 
would like to know if i could show the select items in alphabetical order, not 
in the table order. The list is huge and it's impossible to choose a customer 
without sorting!!
Thanks in advance!!

Rut.