Infinite Scrolling with column filters

otinanism

When using infinite scrolling and column filters the table row of the filter input elements are on the bottom of the table and there is no way to reach them, since if you scroll down new data is fetched and the filters row is again at the bottom. Is there any way to make the filters row fixed like the header?

Thank you.

allan

Heh! I never thought of that... However, I hadn't really been expecting the input control elements to be include the data for the table. Can you put the input elements for the filters in tfoot like in this example: http://localhost/datatables/DataTables/examples/api/multi_filter.html ? That way they will always be at the bottom of the table.

Allan

otinanism

Hi Allan,

Thank you for the immediate response.

Maybe I was not very clear. I am using the tfoot element as in the example and it is indeed always at the bottom of the table, but since the table has vertical scroll, I have to scroll down to find the input elements for the filters. But when you scroll down with infinte scrolling data is fetched and you can never reach the end of the table (only when there is no more data to be fetched.

In the example you mentioned there is no scrolling, or maybe I do not understand what you mean?

Thank you again.

allan

In this example with infinite scrolling ( http://datatables.net/examples/basic_init/scroll_y_infinite.html ) the tfoot element is always visible at the bottom of the table (it's possibly you might need to scroll the table to get to it, but that's about it). A cross between that and the multi filter example linked above will hopefully do the trick.

Allan

otinanism

Thanks again Allan.

Let me be a little bit more specific. I am using ajax as a datasource to fetch data for infinite scrolling.
this is my setup, copied from your example:

[code]

var firstTime = true;
var oTable, oSettings, oHeader;
var oLoadParams = {
iDataStart: 0,
iDataLength: 100,
iLock: false
};

function fnAddAjaxData()
{
oLoadParams.iLock = true;

$.getJSON(
oTable.fnSettings().sAjaxSource +
"?iStart="+ oLoadParams.iDataStart +
"&iLength="+ oLoadParams.iDataLength,
function(json) {
// json.aaData = json.dsLogList; // this assignmenet is needed because the plugin requires a variable named aaData
oTable.fnAddData(json.aaData);
oLoadParams.iDataStart = oLoadParams.iDataStart + json.aaData.length;
oLoadParams.iLock = false;
}
);
}


oTable = $('#logsTable').dataTable( {
"sDom": 'lfr<"scroller"t>ip',
"bPaginate" : false,
"sAjaxSource" :"showNextConsoleData",
"bAutoWidth" : false,

} );
oHeader = new FixedHeader( oTable );
oSettings = oTable.fnSettings();
fnAddAjaxData();

$('div.scroller').scroll( function() {
if (!oLoadParams.iLock)
{
if ( $(this).scrollTop() + $(this).height() >
$(oSettings.nTable).height() - 100 )
{
fnAddAjaxData();
$('div.scroller').focus();
}
}
} );

[/code]

and this is my html table:

[code]





ID
TMS
PID
TID
Service
Job
Level
Text
SrcFunc
SrcFile
































[/code]

The difference in the scroll_y_infinite example as i saw it is that you add a parameter "sScrollY": "200px"
When I tried to use it I get a js alert "FixedHeader 2 is not supported with DataTables' scrolling mode at this time".
Also, I get an horizontal scroller where without it I did not have any, but that might have to do with the rest of my layout.

allan

Oh I see - you are using the infinite scrolling built into DataTables. Might it be an option to switch over to this? What you'd need to do is fix the height of the tbody element, which is quite difficult to do (cross browser...), but a solved problem in DataTables already :-)

Allan

otinanism

Allan,

I am sorry but I am not sure what you mean. Am I doing something wrong? This is code from an example I found, is there a different way to do infinite scrolling with ajax loading?

Thank you.