sPlaceHolder: head:before/after

GoogleCodeExporter commented 9 years ago

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.

Original issue reported on code.google.com by warren.man.ng@gmail.com on 30 Jul 2011 at 8:18

Attachments:

Capture.PNG

GoogleCodeExporter commented 9 years ago

same problem here, i'm using ver 1.2.1

Original comment by AzerDarkBlade on 4 Aug 2011 at 9:46

Attachments:

error.png

GoogleCodeExporter commented 9 years ago

I modified the source code and it worked for me

you can try too.  search for sFilter, then in the head:before modify the line 
to "first" instead of "last"

sFilterRow = "thead tr:first";

this solves the "head:before" option for me

hope this help

Original comment by warren.man.ng@gmail.com on 4 Aug 2011 at 9:55

GoogleCodeExporter commented 9 years ago

thanks a lot warren.man.ng,,,

it works now,,,,

by using your suggestion i modified the code into this:

if (properties.sPlaceHolder == "head:after") 
            {
                var tr = $("thead tr:last", oTable).detach();
                tr.prependTo($("thead", oTable));
                sFilterRow = "thead tr:last";
            } 
            else if (properties.sPlaceHolder == "head:before") 
            {
                var tr = $("thead tr:first", oTable).detach();
                tr.prependTo($("thead", oTable));
                sFilterRow = "thead tr:first";
            }

Original comment by AzerDarkBlade on 5 Aug 2011 at 9:21

Attachments:

GoogleCodeExporter commented 9 years ago

Thank you for this solution! It solves the problem, but there is still an odd 
response.

If you have the following in your HTML:
<thead>
<tr>
<th> Text 1</th>
</tr>
<tr>
<th> Text 2</th>
</tr>
</thead>

and you define sPlaceHolder as head:after you will get:
text on top of header - Text 2
text in search box - Text 1

which is no problem i just switched the order in <thead>, but i thought it 
should be mentioned.

Original comment by a...@schrafelpaper.com on 11 Aug 2011 at 8:55

GoogleCodeExporter commented 9 years ago

This issue was closed by revision r25.

Original comment by joc...@gmail.com on 25 Sep 2011 at 1:34

Changed state: Fixed

GoogleCodeExporter commented 9 years ago

Hello Sir , 
well i am facing a similar problem as that you just posted,

Even after having done the above modifications , i am still obtaining 
undesirable results .
as matter of fact i am posting the files which i have used as attachment .

part A is the HTML code which  i used , part B is the full js file which i used,
Still i am not being able to figure out where the real problem is .
Thanks in advance.

.....
part A,

  $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"><thead><tr><th>1111</th><th>2222</th><th>3333</th><th>4444</th><th>5555</th><th>6666</th><th>7777</th><th>8888</th></tr></thead><thead><tr><th>1111</th><th>2222</th><th>3333</th><th>4444</th><th>5555</th><th>6666</th><th>7777</th><th>8888</th></tr></thead></table>' );
//          $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" 
class="display" 
id="example"><thead><tr><th>1111</th><th>2222</th><th>3333</th><th>4444</th><th>
5555</th><th>6666</th><th>7777</th><th>8888</th></tr></thead><tfoot><tr><th>1111
</th><th>2222</th><th>3333</th><th>4444</th><th>5555</th><th>6666</th><th>7777</
th><th>8888</th></tr></tfoot></table>' );

            //          var oTable2 =  $('#example').dataTable( {
                $('#example').dataTable( {              

                "sPaginationType": "full_numbers",

                "aaData": arrayCRV}).columnFilter({sPlaceHolder: "head:before",
                aoColumns: [ { type: "text" },
                             { type: "text" },
                             { type: "text" },
                             { type: "text" },
                             { type: "text" },
                             { type: "text" },
                             { type: "text" },
                             null
                        ]

                });   

............
Part B
/*
* File:        jquery.dataTables.columnFilter.js
* Version:     0.9.0
* 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 place ("tfoot", "thead"). Default is "tfoot"
* @sRangeSeparator              String      Separatot that will be used when 
range values are sent to the server-side. Default value is "~".
* @iFilteringDelay              int         TODO: Delay that will be set 
between the filtering requests. Default is 250.
* @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

http://www.datatables.net/plug-ins/filtering

*/
(function ($) {

    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;

    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 + '"/>');
        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, index, true, false);
            });
        } else {
            input.keyup(function () {
                /* Filter on the column (the index) of this element */
                oTable.fnFilter(this.value, index, regex, smart);
            });
        }

        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() {

        th.html(_fnRangeLabelPart(0));
        var sFromId = sTableId + '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 = sTableId + '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(
            function (oSettings, aData, iDataIndex) {
                var iMin = document.getElementById(sFromId).value * 1;
                var iMax = document.getElementById(sToId).value * 1;
                var iValue = aData[index] == "-" ? 0 : aData[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();

        });

    }

    function fnCreateDateRangeInput() {

        th.html(_fnRangeLabelPart(0));
        var sFromId = sTableId + '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 = sTableId + '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(
            function (oSettings, aData, iDataIndex) {
                var dStartDate = from.datepicker("getDate");

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

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

                if (dCellDate == null)
                    return false;

                if (dStartDate == null && dEndDate == null) {
                    return true;
                }
                else 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();
        });

    }

    function fnCreateSelect(aData) {
        var index = i;
        var r = '<select class="search_init select_filter"><option value="" class="search_init">' + label + '</option>', j, iLen = aData.length;

        for (j = 0; j < iLen; j++) {
            r += '<option value="' + aData[j] + '">' + aData[j] + '</option>';
        }
        var select = $(r + '</select>');
        th.html(select);
        th.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($(this).val(), index);
        });
    }

    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);
    }
    }

    $.fn.columnFilter = function (options) {

        oTable = this;

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

        };

        properties = $.extend(defaults, options);

        return this.each(function () {

            asInitVals = new Array();
            var sFilterRow = "thead tr";
            if (properties.sPlaceHolder == "head:after") {
                sFilterRow = "thead tr:last";
//                alert("aaa");
//                tr.prependTo($("thead", oTable));
//                sFilterRow = "thead tr:last";
            } else if (properties.sPlaceHolder == "head:before") {
//                var tr = $("thead tr:first").detach();
//                tr.prependTo("thead");
//                sFilterRow = "thead tr:first";
              //  alert("bbb");

//                var tr = $("thead tr:last", oTable).detach();
//                tr.prependTo($("thead", oTable));
                sFilterRow = "thead tr:last";
            }

            $(sFilterRow + " th", oTable).each(function (index) {
                i = index;
                var aoColumn = { type: "text",
                    bRegex: false,
                    bSmart: true
                };
                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();
                th = $($(this)[0]);
                if (aoColumn != null) {
                    if (aoColumn.sRangeFormat != null)
                        sRangeFormat = aoColumn.sRangeFormat;
                    else
                        sRangeFormat = properties.sRangeFormat
                    switch (aoColumn.type) {
                        case "number":
                            fnCreateInput(true, false, true);
                            break;
                        case "text":
                            bRegex = (aoColumn.bRegex == null ? false : aoColumn.bRegex);
                            bSmart = (aoColumn.bSmart == null ? false : aoColumn.bSmart);
                            fnCreateInput(bRegex, bSmart, false);
                            break;
                        case "select":
                            fnCreateSelect(aoColumn.values);
                            break;
                        case "number-range":
                            fnCreateRangeInput();
                            break;
                        case "date-range":
                            fnCreateDateRangeInput();

                            break;
                        default:
                            break;

                    }
                }
            });

            for (j = 0; j < aiCustomSearch_Indexes.length; j++) {
                var index = aiCustomSearch_Indexes[j];
                var fnSearch_ = function () {
                    return $("#range_from_" + index).val() + properties.sRangeSeparator + $("#range_to_" + index).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) {
                        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);

Original comment by shafra...@gmail.com on 31 Aug 2012 at 1:59

Attachments:

TEST12.png

GoogleCodeExporter commented 9 years ago

yes having the same issue as above ^ (Comment # 6)

Original comment by shahmi...@gmail.com on 11 Jul 2013 at 8:57

Attachments:

headergone.PNG

kalyani14591 / jquery-datatables-column-filter

sPlaceHolder: head:before/after #24