Help: iDisplayLength and iDisplayStart are NaN...

tommck

I have a data table using Scroller with the following init:

[code]
_dataTable = getTableElement().dataTable({
sDom: '<"top"i<"clear">>rtS<"bottom"i<"clear">>',
sScrollY: '300px',
bDeferRender: true,
bAutoWidth: false,
bProcessing: true,
bServerSide: true,
sAjaxSource: ajaxUrl,
oLanguage: ....,
aoColumns: .....
[/code]

When I get into fnServerData (and on the server), the "iDisplayLength" parameter is "NaN". If I handle this on the server (by defaulting it), the 2nd "page" has "iDisplayStart" = "NaN".

As far as I know, this is never supposed to happen. What am I doing Wrong?

tommck

Oh, should have pointed out, this is happening with 1.8 and 1.8.1

T

tommck

Oh, and additionally, the Info says "Showing NaN to NaN of 343 Entries"...

tommck

More info: Here's the entire set of parameters from the Query String:
sEcho = 1
iColumns = 9
sColumns =
iDisplayStart = 0
iDisplayLength = NaN
mDataProp_0 = null
mDataProp_1 = null
mDataProp_2 = null
mDataProp_3 = null
mDataProp_4 = null
mDataProp_5 = null
mDataProp_6 = null
mDataProp_7 = null
mDataProp_8 = null
sSearch =
bRegex = false
sSearch_0 =
bRegex_0 = false
bSearchable_0 = true
sSearch_1 =
bRegex_1 = false
bSearchable_1 = true
sSearch_2 =
bRegex_2 = false
bSearchable_2 = true
sSearch_3 =
bRegex_3 = false
bSearchable_3 = true
sSearch_4 =
bRegex_4 = false
bSearchable_4 = true
sSearch_5 =
bRegex_5 = false
bSearchable_5 = true
sSearch_6 =
bRegex_6 = false
bSearchable_6 = true
sSearch_7 =
bRegex_7 = false
bSearchable_7 = true
sSearch_8 =
bRegex_8 = false
bSearchable_8 = true
iSortingCols = 1
iSortCol_0 = 1
sSortDir_0 = asc
bSortable_0 = false
bSortable_1 = false
bSortable_2 = true
bSortable_3 = true
bSortable_4 = false
bSortable_5 = false
bSortable_6 = false
bSortable_7 = false
bSortable_8 = false
_ = 1310644923367

tommck

OK, I know I'm talking to myself here, but also, the scrollbar does not look like it's scrolling the whole collection.. it only looks like it's scrolling the first set of retrieved records.

fbas

Sounds like your server side JSON response is not formatted properly. Your JSON should contain several items in addition to just your 2D array of data. Some of these values are the number of rows returned and the number of rows total in your db. If those aren't set, you'll get NaN.

This reference page describes the JSON object DataTables expects:
http://www.datatables.net/usage/server-side

Here's an example :
[code]
{"sEcho":1
,"iTotalRecords":11
,"iTotalDisplayRecords":10
,"aaData":[
["1","MDH","MDS - API"],["2","P2PS","P2PSClient"]
,["3","RMDS","teswt"],["4","RWDS","test"]
,["4","RWDS","test"],["4","RWDS","test"]
,["4","RWDS","test"],["4","RWDS","test"]
,["4","RWDS","test"],["4","RWDS","test"]
,["4","RWDS","test"]
]}
[/code]
http://www.datatables.net/forums/discussion/2783/json-format/p1

and see http://datatables.net/examples/data_sources/server_side.html for a server side PHP script that returns the correctly formatted JSON.

With Chrome or Firebug's debugging tools in your browser, you can view the JSON that was returned to your page from the server. The easiest way to get there in Chrome is to right click anywhere on your HTML page and choose "inspect element", then go to Network (you may need to refresh your page and have the AJAX call run again) which shows network resources the browser downloaded. Click on your server side script in that list and you can view the outbound and inbound data by selecting different tabs in the main pane in the middle.

tommck

That's the first request... my server-side hasn't even come into play yet;

fbas

First request from where? Data has to come from somewhere. How are you specifying the data?

tommck

I'm saying that this is the first request from the data table to the server and iDisplayLength = NaN. I have not returned any JSON objects yet.

fbas

Here's my guess: Without returning a JSON object, the client page will not update the data, including the iDisplayRows values, so you'll have undefined values which are showing up as "NaN" on your page.

Get the server side code running and I think it will fix this.

allan

What does your full DataTables initialisation look like please?

tommck

It's not server code, fbas

Here's the full init:

[code]
_dataTable = self.getTableElement().dataTable({
sDom: '<"top"i<"clear">>rtS<"bottom"i<"clear">>',
sScrollY: '300px',

bDeferRender: true, // don't create all the rows at first, only when needed
bAutoWidth: false,
bProcessing: true,
bServerSide: true,
sAjaxSource: ajaxUrl,
oScroller: { trace: true },

oLanguage: {
sLengthMenu: _lengthMenuToUse,
sEmptyTable: 'Your Cart is Empty',
sZeroRecords: 'Your Cart is Empty',
oPaginate: {
sFirst: '',
sLast: '',
sPrevious: '',
sNext: ''
}
},

aoColumns: [
{ // delete column
bSortable: false, sWidth: '5%', mDataProp: null, bUseRendered: false, bVisible: showDelete,
fnRender: function (oObj) { return _deleteItemTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // image
bSortable: false, sWidth: '5%', mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _imageTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // item num
bSortable: true, sWidth: '13%', mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _itemNumberTemplate.tmpl(oObj.aData).outerHTML(); }
},
{// Description
bSortable: true, mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _descTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // Size
bSortable: false, sWidth: '10%', sClass: 'colSize', mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _sizeTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // Min Quantity
bSortable: false, sWidth: '5%', sClass: 'colQty', mDataProp: null, bUseRendered: false, bVisible: showMinQty,
fnRender: function (oObj) { return _minQtyTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // Quantity
bSortable: false, sWidth: '20%', sClass: 'colQty', mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _quantityTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // Unit Cost
bSortable: false, sClass: 'unitCost', sWidth: '10%', mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _unitCostTemplate.tmpl(oObj.aData).outerHTML(); }
},
{ // Total Cost
bSortable: false, sClass: 'totalCost', sWidth: '15%', mDataProp: null, bUseRendered: false,
fnRender: function (oObj) { return _totalCostTemplate.tmpl(oObj.aData).outerHTML(); }
}
],
aaSorting: [[1, 'asc']],
fnServerData: function (sSource, aoData, fnCallback) {
_debug('debug', 'Retrieving Shopping Cart Items');
if (_showZeros == false) {
aoData.push({ name: 'excludeQuantityZero', value: 'true' });
}

$.getJSON(sSource, aoData, function (json) {
if (json.Success == false) {
_debug('error', json.Message);
alert(json.Message);
}
else {
fnCallback(json.Data);
}
});
},

fnRowCallback: function (row, aData, iDisplayIndex, iDisplayIndexFull) {

// grab the quantity box and the remove button
var boxEl = $(row).find('.quantity');
var delEl = $(row).find('.removeCartItemButton');

var box = $(boxEl);
var del = $(delEl);

// grab the key
var itemKey = box.data('itemKey');
// set it on the row
$(row).data('itemKey', itemKey);

// if it's readonly, disable them
if (isReadOnly == true) {
box.attr('disabled', true);
del.attr('disabled', true);
}
else {
// check to see if we have a pending value for this.
var newVal = _getPendingValue(itemKey);
var disable = false;

if (newVal != null && newVal != box.value) {
if (newVal == -1) {
// it's deleting - disable this row
$(row).addClass('disabled');
disable = true;
newVal = 0;
}
$(row).find('.totalCost').html('[Pending]');
box.val(newVal);
}

if (disable == false) {
// wire up up/down and ui events.

box.numericUpDown({
downBefore: (typeof (TouchUtils) != "undefined")
})
.change(function (e) {
var val = box.val();

_onCartItemQuantityChanged(val, Number(itemKey));

e.preventDefault();
});

del.click(function (e) {
self.removeOrderItem(itemKey);
self.redraw(); // cause the above logic to be run to disable the row.
e.preventDefault();
});
}
}

return row;
}
});
[/code]

tommck

fbas - the server has not gotten involved yet!

This is an empty table... then fnServer gets called.
the aoData collection -before- being sent to the server has "NaN" for the "iDisplayLength" parameter. My server code has nothing to do with it!!

allan

What is the value of "_lengthMenuToUse" please? My guess is that you've got strings in there rather than integers for the numbers to be used.

Allan

tommck

[code]
var _defaultLengthMenu = 'Display ' +
'20' +
'50' +
'100' +
'All' +
' items';
var _lengthMenuToUse = _defaultLengthMenu;
[/code]

tommck

hmm... it's possible that the length menu could also just be ' '

Would that be bad?

tommck

actually, it's not ' ' I checked.

fbas

Without your full code I can't run this. Too many functions and variables I have to substitute.

In the end, I can get it to make the JSON call, but without a valid server side script in place, it's not getting anywhere.

Are you familiar with the debugger in Firefox or Chrome?

----------

but back to what I was asking earlier: you ARE pulling from the AJAX JSON on the first draw, whether you know it or not. That's the only way you have data to begin with, given your code.

Can you post your server side script? If it's not paginating/scrolling properly, it may be an issue on the server side.

allan

Hmmm - that looks absolutely fine :-). So I'm not too sure what is going on I'm afraid :-(. Can you update to the Scroller nightly please, if you haven't already: http://datatables.net/download/ .

Also, I know you are using localhost at the moment, but is there any way you can put it up on the web so I can see it in action? I'm not sure I'll be able to figure it out without being able to reproduce or see it myself.

Allan

tommck

I don't have data to begin with, fbas! That's the whole point. What part of FIRST CALL TO THE SERVER don't you understand??

tommck

Allan, I'll try to put it up somewhere for you when I can.

Thanks

allan

No need to shout - its quite a complex little setup here, and we've not come across this kind of issue before :-). I've been looking at the code and I don't understand why the values you are seeing would be NaN. Did you get a change to update to the Scroller nightly? I think that is required for server-side processing.

Allan

tommck

I am deploying it now. I"ll email you the info on how to check it out.

tommck

email sent

allan

Awesome thanks very much for the link - I believe I understand what is happening now. Basically it comes down to the fact that you have the table hidden (display:none) when it is being initialised.

You can see the issue this causes by running:

[code]
$('#shoppingCartItemsTable').dataTable().fnSettings().oScroller.s.rowHeight
[/code]

the value is 0 - which shouldn't be the case of course, but since you have the element hidden, there can't be a hight calculated (this is the function in question: https://github.com/DataTables/Scroller/blob/master/media/js/Scroller.js#L525 ).

So the fix is to not make the element hidden :-). Another option would be to set the row height manually: http://datatables.net/docs/Scroller/1.0.0/_anonymous__Scroller.oDefaults.html#rowHeight_details .

Allan

tommck

Ahh,, I'm starting off with it hidden, because I get FUBC due to hiding some columns on start.

Can I add the Scroller stuff after it renders?

tommck

Can I assume you're done with the site? If so, I want to take it down

tommck

Actually, I figured out that I can hide the columns on the table first, then make it visible, then run the datatables functionality.

One more question about it... Can I set sScrollY to something that will make it take up all the space given to it, or at least a number of rows? hard-coding the size in pixels is a bit of a problem.

allan

Yup all done with the site - thanks for putting it up.

[quote]tommck said: Can I set sScrollY to something that will make it take up all the space given to it[/quote]

You can give it a relative size such as 100%, but I would imagine the best way to do it would be to control the size of the scrolling element using Javascript. That way you can calculate the height of the window (minus the header, or whatever you want) and then set the size to that.

Allan

tommck

if I give it '100%', it comes up with no rows and "showing 1 to 0 of 343 Items" in the Info

FreeMEM

tommck, you have to change bServerSide: true to false.