jquery - How to place DataTables column filter on top

Question

I am using jQuery DataTables latest version. I want to use individual column filter on every table so am using the column filter plugin but am getting search boxes in footer only. I want to place in the header

    $(document).ready(function () {
var  oTable=$("#example").dataTable({
       "bJQueryUI": true,
        "sScrollX": "100%",
        "aLengthMenu": [[5, 15, 50, 100], [5, 15, 50, "l00"]],
        "iDisplayLength": 10,
         "sPaginationType": "full_numbers",
        "sDom": '<"top"if>rt<"bottom"lp><"clear">'

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

How can I place it on the top of my table?

Answer 1

Method 1 (CSS)

You could change the CSS to

tfoot {
    display: table-header-group;
}

Method 2 (Javascript)

Put the filter row stuff into the THEAD as TDs (not THs) and change

$("tfoot input")

to

$("thead input")