Possible for datatable to display data more than 1000 record without paging?

cezs

Hi Allan,

Thanks for the tips before using live to attach my own event on each row.

Now i have another issue, which is displaying record without paging.
I am using server-side processing, datatable version 1.7.6 and jquery 1.5.1.

Addition requirement are, i have auto reload the table for 15 seconds interval. if it only 100-200 record it still working okay. But if record goes to 1000 or more. Datatable take about15 second to display the table on screen and another auto reload interval reach, so the table will seems like reloading forever.

It there any suggestion, tips on this?

below is my code snap
[code]
var Table = {
arrData: null,
timer: null,
objTable: null,
exists: false,

fnTableInit:function () {
this.objTable = jQuery('#example').dataTable({
"bFilter": true,
"sDom": 'T<"clear spacer"><"H"lr>t<"F"ip><"clear spacer">T',
"bProcessing": true,
"aaSorting": [],
"bJQueryUI": true,
"sScrollY": 450,
"aoColumns": [
{ "sName": "FieldA", "sClass": "center", "sWidth": "80px" },
{ "sName": "FieldB", "sClass": "center", "sWidth": "90px" },
{ "sName": "FieldC", "sClass": "center", "sWidth": "130px" },
{ "sName": "FieldD", "sClass": "center", "sWidth": "130px" },
{ "sName": "FieldE", "sClass": "center", "sWidth": "70px" },
{ "sName": "FieldF", "sClass": "center", "sWidth": "135px" },
{ "sName": "FieldG", "bVisible": false, "bSortable": false, "sWidth": "0px" },
{ "sName": "FieldH", "sClass": "right", "sWidth": "115px" },
{ "sName": "FieldI", "sClass": "right", "sWidth": "115px" },
{ "sName": "FieldJ", "sClass": "center", "sWidth": "90px" },
{ "sName": "FieldK", "sClass": "center", "sWidth": "295px" },
{ "sName": "FieldL", "sClass": "center", "sWidth": "80px" }
],
"bAutoWidth": false,
"bScrollCollapse": true,
"iDisplayLength": -1,
"iDisplayStart": 0,
"aLengthMenu": [[-1], ['All']],
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "getDataTable.aspx",
"fnServerData": Table.fnTableDataBind(["FieldA", "FieldB", "FieldC", "FieldD", "FieldE", "FieldF", "FieldG", "FieldH", "FieldI", "FieldJ", "FieldK", "FieldL"]),
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
jQuery(nRow).addClass(aData[14]);

if (Table.arrData != null && Table.arrData.length > 0){
if (Table.arrData[Table.arrData.length-1] == aData[aData.length-1]){
jQuery(nRow).addClass('ui-state-active');
Table.exists = true;
}
}

return nRow;
},
"fnDrawCallback": function () {
Button.fnFuncButtonDisableEvent();
Button.fnProcessButtonDisableEvent();
if (DDLBusDate.busdate == GetActiveBusDate.busdate){
if (!Table.exists){
BtnA.fnEnable();
BtnB.fnEnable();
} else {
Button.fnButtonEnableEvent();
BtnA.fnEnable();
BtnB.fnEnable();
}
}
},
"fnInitComplete": function () {
Table.fnHeaderEvent();
Table.fnRowEvent();
Table.fnFooterEvent();
Table.fnBusDateFilter();
Table.arrData = '';
}
});


},

fnRowEvent:function () {
//add event for click, highlist and mouseover
},

fnBusDateFilter:function(){
//drop down filter for busines date
},

fnFooterEvent:function () {
//filtering for columns
},

fnHeaderEvent:function () {
//header event for click, mouseover and highlight
},

fnAutoReload:function (clearTimer) {
if (clearTimer){
clearTimeout(Table.timer);
}
Table.timer = setTimeout( function(){
Table.objTable.fnDraw(false);
Table.fnAutoReload(true);
}, 15000);
},

fnStopReload:function () {
clearTimeout(Table.timer);
},

fnTableDataBind:function( aElements )
{
return function ( sSource, aoData, fnCallback ) {
Table.exists = false;
aoData.push ( { "name": "businessdata", "value": (DDLBusDate.busdate == null) ? "" : DDLBusDate.busdate } );

jQuery.ajax( {
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [], formatData, inner;

for ( var i=0, iLen=json.aaData.length ; i

allan

Have a look at Scroller: http://datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables - it will give you a huge speed boost for this kind of table.

Allan

cezs

Hi Allan,

Thanks for the tips.

It works. But i think in my case here i used jQuery UI the table will always show some empty space for scroll bar and this only happen on IE. I will try to upload some image on it.

cezs

cezs

Hi Allan,

Here is the image.

Before using scroller:-
[url=http://www.freeimagehosting.net/image.php?693d366ab0.jpg][img]http://www.freeimagehosting.net/uploads/th.693d366ab0.jpg[/img][/url]

After add in scrolller pluin:-
[url=http://www.freeimagehosting.net/image.php?494c248f31.jpg][img]http://www.freeimagehosting.net/uploads/th.494c248f31.jpg[/img][/url]

cezs

Hi Allan,

I am not i know how to add a link to my image.
Sorry..

Thanks in advance

cezs

allan

I'd suggest trying the DataTables 1.8.2 development nightly image from http://datatables.net/download and see if that helps.

Allan

cezs

Hi Allan,

I've try your suggestion, no help also. I can confirm now if i use back datatable version 1.7.6 don't have this problem. But if i change back to 1.7.6 i can not use the scroller....:(

cezs

No sure whether is scroller or datatable js is the fault. Coz i go through scroller js file seems like nothing to do with width.

Haha..hope i am not giving you much trouble...lol

allan

Can you link to your page which is using the nightly of DataTables please?

cezs

Hi Allan,

I am sorry, i couldn't get you a link to the page with nightly datatable.js as the project is still in development stage.

I go through the JS file and found this _fnScrollDraw function which i think it will re-calculate for the scroll bar width. I try to alert the value starting at line 3990 (datatable version 1.8.1) or line 4017 (datatable version 1.8.2).

[code]
/* Size the table as a whole */
iSanityWidth = $(o.nTable).outerWidth();
if ( o.oScroll.sX === "" )
{
/* No x scrolling */
o.nTable.style.width = "100%";

/* I know this is rubbish - but IE7 will make the width of the table when 100% include
* the scrollbar - which is shouldn't. This needs feature detection in future - to do
*/
if ( $.browser.msie && $.browser.version <= 7 )
{
o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth()-o.oScroll.iBarWidth );
}
}
else
{
if ( o.oScroll.sXInner !== "" )
{
/* x scroll inner has been given - use it */
o.nTable.style.width = _fnStringToCss(o.oScroll.sXInner);
}
else if ( iSanityWidth == $(nScrollBody).width() &&
$(nScrollBody).height() < $(o.nTable).height() )
{
/* There is y-scrolling - try to take account of the y scroll bar */
o.nTable.style.width = _fnStringToCss( iSanityWidth-o.oScroll.iBarWidth );
if ( $(o.nTable).outerWidth() > iSanityWidth-o.oScroll.iBarWidth )
{
/* Not possible to take account of it */
o.nTable.style.width = _fnStringToCss( iSanityWidth );
}
}
else
{
/* All else fails */
o.nTable.style.width = _fnStringToCss( iSanityWidth );
}
}
[/code]

I try to alert the value for :-

$(o.nTable).outerWidth();

let say starting 1st load (initialize) the value is 3000

but when second time (in my case is auto reload after 15 seconds)

the value for same code above will become 2983
which i think is the width without scroll bar in the browser (only happen in IE, my case here is IE7)

so from my finding, the 1st time the script read the width correctly which is 3000 exclude the scroll bar, the second time it will read the width as 2983 which is included the scroll bar and then minus of the scrollbar width again become the image i send to u previously.

I know for normal case without reloading the datatable periodically won't hit this issue. So i am the special case here, hopefully you could have an eye on this. Or any tips or suggestion to fix this.

Regards,

cezs

allan

Yup I'd say you've found the right bit of code which is at fault - it is providing particularly difficult to get that to work 100% of the time over all browsers... I would need to be able to reproduce what you are seeing in order to have a chance of fixing it though - if you could provide a cut down example showing the issue, that would be very helpful towards fixing it.

Allan

cezs

Hi Allan,

I think you are right about that to make this work for all browser, it is not an easy work.

Currently i found a work around which work in my case.

I did little bit modification to datatable.js at line 3999 in version 1.8.1
[code]
if ( $.browser.msie && $.browser.version <= 7 )
{
//temporary fix
// o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth()-o.oScroll.iBarWidth );
o.nTable.style.width = _fnStringToCss( $('.dataTables_scroll').outerWidth()-o.oScroll.iBarWidth );
}
[/code]

and also at line 4029 same version

[code]
/* Recalculate the sanity width - now that we've applied the required width, before it was
* a temporary variable. This is required because the column width calculation is done
* before this table DOM is created.
*/
// iSanityWidth = $(o.nTable).outerWidth();
//temporary fix
iSanityWidth = $('.dataTables_scroll').outerWidth();

/* If x-scrolling is disabled, then the viewport cannot be less than the sanity width */
if ( o.oScroll.sX === "" )
{
// nScrollBody.style.width = _fnStringToCss( iSanityWidth+o.oScroll.iBarWidth );
// nScrollHeadInner.parentNode.style.width = _fnStringToCss( iSanityWidth+o.oScroll.iBarWidth );
//temporary fix
nScrollBody.style.width = $('.dataTables_scroll').outerWidth();
nScrollHeadInner.parentNode.style.width = $('.dataTables_scroll').outerWidth();
}
[/code]

the 1st part is to make IE work and the 2nd part is to make sure FF and chrome work nicely when the record count is less than the view port height.

Correct me if i miss out or wrongly fix.


I will try to come out a cut down version of my page, but recently wasn't a good time as the project is going to roll out.

thx

cezs

allan

Hi cezs,

Thanks for that - no worries about the little delay in getting a cut down version up. If you do have a chance in future, that would be great so I can get this fixed for the next release.

Thanks,
Allan