Column filter appearing within the thead rather than above or below

[GoogleCodeExporter]

Hi guys,

My code is as follows:

<code>
  oTable = $('#example').dataTable({
    "sPaginationType": "full_numbers",
    "aaSorting": [[0, 'desc']],
    "aoColumns": [
      {"bSortable": true},
      {"bSortable": true},
      {"bSortable": true},
      {"bSortable": true},
      {"bSortable": true},
      {"bSortable": true},
      {"bSortable": true},
      {"bSortable": false}
    ]
  });
  oTable.columnFilter({
    sPlaceHolder: "head:after",
    aoColumns: [null, null, null, {type: "text"}, {type: "checkbox"}, {type: "select"}, {type: "select"}, null]
  });
</code>

I was expecting the column filter row to show after the header. However, it is 
showing within the header row itself.

I am using following JavaScript files:

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>

I have tested this on IE7 and FF15 and getting same result in both cases.

Please advise.

Best Regards,

Ashish.

Original issue reported on code.google.com by ashishku...@hotmail.com on 24 Jan 2013 at 11:40

Attachments:

• header.JPG

[GoogleCodeExporter]

See live example 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/numberRange.html

You need to put the duplicate row in THED.

Original comment by joc...@gmail.com on 21 May 2013 at 12:27

• Changed state: Done

[GoogleCodeExporter]

I'm kind of a newbee here.

What do you mean with the duplicate row in THED?

You can se my table here:
http://www.ringsport.no/index.php/resultatbasenordmarkahalv

I'm using ari datatables with filter plug-in:

* File:        jquery.dataTables.columnFilter.js
* Version:     1.4.2.
* Author:      Jovan Popovic

oTable = this;

        var defaults = {
            sPlaceHolder: "head:before",
            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 = "thead tr:first";
            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,
                    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);
                            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);
                            break;

                    }

Original comment by ringsp...@online.no on 13 Mar 2014 at 9:20