Horizontal Scrolling and Individual Column Filter using Selects

bighungry

I have a working data table using http://datatables.net/examples/api/multi_filter_select.html.

When I enable horizontal scrolling, the select filters in the footers are not aligned with their respective columns.

As soon as I click a header to sort a column, the select filters instantly sync up and remain so until leaving and returning to the page.

Is there a setting I am missing?

Thanks.

[code]
$(document).ready(function () {
$.datepicker.regional[""].dateFormat = 'mm/dd/yy';
$.datepicker.setDefaults($.datepicker.regional['']);

var oTable = $('#indexTable').dataTable({
"sDom": "<'row'<'span5'l><'span5'f>r>t<'row'<'span4'i><'span6'p>>",
"oLanguage": {
"sSearch": "Search all columns:",
"sProcessing": ""
},
"asStripeClasses": ['dataTableOddRow', 'dataTableEvenRow'],
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bJQueryUI": false,
"bAutoWidth": true,
"bPaginate": true,
"sPaginationType": "bootstrap",
"bProcessing": true,
"aoColumnDefs": [{ "bSortable": false, "aTargets": [3]}],
"aaSorting": [[1, 'asc']]
});

$("#datepicker_min").datepicker({
"onSelect": function (date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function () {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});

$("#datepicker_max").datepicker({
"onSelect": function (date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function () {
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});

/* Add a select menu for each TH element in the table footer */
$(".dataTables_scrollFootInner tfoot th").each(function (i) {
if ($(this).is('.dataSelect')) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
$('select', this).change(function() {
oTable.fnFilter($(this).children("select").val(), $("tfoot th").index(this));
});
}
});
[/code]

kwslavens

I am having the exact same issue using Column Filter plugin. The header and footer will be mis-aligned when the page is opened until a filter is entered. Then its extends the header and footer to match the table. You can see at the side of the screen that its extended off to the right past the table.