Filter on top & widht

ringsport

I have just set up a table using ari datatables and filter plug-in, and it's working fine. But I'm strugling to get the filter to be over my header. I also want the width of the filter-div to fit my colomnwidth.

Here is my table:
http://www.ringsport.no/index.php/resultatbasenordmarkahalv

here is what i have tried:
* 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";
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";
}

allan

Hi,

Thanks for picking up the DataTables support option. The columnFilter plug-in is third party software, and not normally some ware that I would support as part of the DataTables project as I'm not familiar with its code, and it appears the project as a whole as been deprecated by its author.

However, looking at the columnFilter code, I think the issue that is occurring here, is that it is assuming you will have two rows in your `thead` . For example try putting this into your HTML:

[code]



År
Plass Kjønn
Plass totalt
Plass Klasse
Fornavn
Etternavn
Klubb
Klasse
Kjønn
Tid
Bak vinner
Pr km


År
Plass Kjønn
Plass totalt
Plass Klasse
Fornavn
Etternavn
Klubb
Klasse
Kjønn
Tid
Bak vinner
Pr km


...
[/code]

Read the columnFilter code, it will take the second row, remove it from the document and then add it back in as the first row. You might want to use the `bSortCellsTop: true` option in DataTables to make it attach the sort event listener to the top row (since that then then become the bottom row - very confusing, but that's the way it appears to have been written!).

I would also suggest adding something like:

[code]
input.text_filter {
display: inline-block;
width: 100%;
box-sizing: border-box;
}
[/code]

to your CSS. That will allow the filtering inputs to match the column size, rather than forcing their own column size. Is that what you were looking for with the second part of your question?

Thanks,
Allan

ringsport

i'm lost :(
I just can't find out how to add the extra THEAD. I'm using Joomla with the Ari Datatables-module. And I can't fint the html-file to change to code.

Is there someone I can pay for helping me out with this?

allan

I'm afraid I'm not familiar with the Ari Datatables-module. Is it creating the header for you - I presume so?

What you could do, in that case is, just before you create your DataTable do:

[code]
$('#at_539 thead').append( $('#at_539 thead tr').eq(0).clone() );
[/code]

That will clone the current header and insert it into the thead to make two header rows! That should then allow the columnFilter plug-in to operate.

Allan