Double Header for ScrollBody

Martin@heco

I'm using DataTables to display a list of my articles on my website. This data should be filterable depending on the column displayed. So for certain columns I'm trying to append a checkbox or dropdown to the column head.
Unfortunately if the dataset is larger, I need to use a scrollbar for the table body. If this is the case and I try to append a filter to the column head, a second filter is also applied to the second thead of the scrollTable with height set to 0.
This makes refering to the actual filter rather complicated.

The problem can be inspected at http://dev.heco.de/en/edelstahl/flanges/welding-neck-flanges/din-en/pn-16/iso.html, after clicking on "stocks and pricing". A click on the play symbol in the top left shows the filters for this articlegroup. If I try to get the filter for the stocks column by using $('input[name="onStocksFilter"'), I get two different HTML elements.
How can I configure Datatables to suppress this effect?

The config used to initialize the table is this:

var table = target.DataTable( {
    "columns": xhrdata.columns,
    "data":    xhrdata.data,
    "order":   xhrdata.order,
    "paging": false,
    "info": false,
    "bFilter": true,
    "dom": "t",
    "ordering": true,
    "scrollY": "300px",
    "scrollCollapse": true,
})

allan

$('input[name="onStocksFilter"'), I get two different HTML elements. How can I configure Datatables to suppress this effect?

Disable scrolling or refining the selector are the only ways. The reason for this is that when scrolling is enabled DataTables has to split the table up - header, body and footer (if there is a footer). To keep the columns aligned the header has to be cloned and the content retained.

You could use:

$('div.dataTables_scrollHead input[name="onStocksFilter"')

Regards,
Allan

Martin@heco

Unfortunately, disabling the scrollbar is not an option due to explicit request by the customer. So I'll use a refined selector. Thx anyway, Allan...!