Server-side, pagination and row grouping...not friends!?

s-kAn

Good afternoon, Allan. There was a problem with "server-side processing" and "pagination" - will try to explain more in detail everything.
1. From the database, all loaded fine and everything displays properly, but ...
The problem: suppose I have 5 pages of data and correspondingly I show in Table 5 pages. When I shake your pages to stop at 2 or simply click "Next", then there is something incomprehensible. Go to page forward passes and DT shows data page 2, but there is a hang ... The inscription "Processing" hangs and does not disappear, and most importantly all the buttons associated with the transition back is not active, ie on the idea, I shake the button forward or page 2 - Button 2 respectively must be inactive while the first active but it turns out that remains in place as it was, and still - when I turn to page 2 DT must display both - "Showing 11 to 20 of 57 entries", but again remains all in their places, ie see "Showing 1 to 10 of 57 entries" ... Please help us to understand. Yes, all your code - have not changed anything, and your database, ie ajax ... You have a page http://datatables.net/examples/data_sources/server_side.html "Next" / "Previous" work correctly and I still hangs ...
No written text - has decided to experiment and find the cause hangs. The reason is in my code, when I turn the code, everything works fine. Here is the code that I have to disable (http://datatables.net/examples/advanced_init/row_grouping.html), namely -
[code]
"fnDrawCallback": function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 )
{
return;
}

var nTrs = $('tbody tr', oSettings.nTable);
var iColspan = nTrs[0].getElementsByTagNam('td').length;
var sLastGroup = "";
for ( var i=0 ; i

pktm

Hi s-kAn,

btw, what's your native language?

Regarding your problem: would it be possible for you to provide me a minimum example of your code? Th eideal case would be such an example using the example data of datatables, but that's no sufficent condition :)

If you move a page forward, what is the result of the server side script? Did you debug it with firebug or a similar environment to ensure, that the server side is not causing the trouble?

hth, pktm

s-kAn

Good afternoon, pktm.

Hi all from Russia.

My native language - Russian, but I am trying to learn English, excuse me again if the interpreter clumsily conveys my thoughts to you.)
Returning to the problem: that's what gives Firebug when I click "Next" in the DT -
[code]
oSettings.aoData [oSettings.aiDisplay [iDisplayIndex]] is undefined
[/code]
Here is my code in full:
[code]
$('.display').dataTable( {
"bStateSave": true,
"iCookieDuration": "2592000",
"bJQueryUI": true,
"sPaginationType": "two_button",
"oLanguage": {
"sUrl": "json/oLanguage.json"
},
"aoColumns": [
{"bVisible":false},
{"sWidth": "50%"},
null,
null,
{"sWidth": "15px"}
],

"fnDrawCallback": function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 )
{
return;
}
var nTrs = $('tbody tr', oSettings.nTable);
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for ( var i=0 ; i

pktm

Hi!

Well. unfortunately, russian is not a language I speak :) but I guess our english will do it as well.

If you open your website while running firebug, you should see on the console tab, that there are request issued by your script. Something like "GET http://your_url/instance.php?param=value" or "POST http://...".
You can click on such an item to view the result of the request.
This is usually some jquery data structure. For me, it look like this:
[code]
{"aaData":[["Gecko","Mozilla 1.1","Win 95+ / OSX.1+","1.1","A"],["Gecko","Mozilla 1.2","Win 95+ / OSX.1+","1.2","A"],["Gecko","Mozilla 1.3","Win 95+ / OSX.1+","1.3","A"],["Gecko","Mozilla 1.4","Win 95+ / OSX.1+","1.4","A"],["Gecko","Mozilla 1.5","Win 95+ / OSX.1+","1.5","A"],["Gecko","Mozilla 1.6","Win 95+ / OSX.1+","1.6","A"],["Gecko","Mozilla 1.7","Win 98+ / OSX.1+","1.7","A"],["Gecko","Mozilla 1.8","Win 98+ / OSX.1+","1.8","A"],["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],["Gecko","Epiphany 2.20","Gnome","1.8","A"]],"iTotalDisplayRecords":57,"iTotalRecords":57,"sEcho":2}
[/code]

And that's the code I want to see. I want to see it, because there, you can see a) if your instance script terminated sucessfully and b) if the result is valid json and c) if the result is as you expected.

hth, pktm

s-kAn

Good evening, pktm.

Yes, yes, there are such requests ... namely, their two first when loading a table and a second when I clicked on the second page ... so now when I click on the second page - an error, which I wrote in previous post ...
Here is the first GET:

[code]
{"sEcho": 1, "iTotalRecords": 57, "iTotalDisplayRecords": 57, "aaData": [ ["Gecko","Camino 1.0","OSX.2+","1.8","A"],["Gecko","Camino 1.5","OSX.3+","1.8","A"],["Gecko","Epiphany 2.20","Gnome","1.8","A"],["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],["Gecko","Mozilla 1.0","Win 95+ / OSX.1+","1","A"],["Gecko","Mozilla 1.1","Win 95+ / OSX.1+","1.1","A"],["Gecko","Mozilla 1.2","Win 95+ / OSX.1+","1.2","A"]] }
[/code]

Here are two:

[code]
{"sEcho": 2, "iTotalRecords": 57, "iTotalDisplayRecords": 57, "aaData": [ ["Gecko","Mozilla 1.3","Win 95+ / OSX.1+","1.3","A"],["Gecko","Mozilla 1.4","Win 95+ / OSX.1+","1.4","A"],["Gecko","Mozilla 1.5","Win 95+ / OSX.1+","1.5","A"],["Gecko","Mozilla 1.6","Win 95+ / OSX.1+","1.6","A"],["Gecko","Mozilla 1.7","Win 98+ / OSX.1+","1.7","A"],["Gecko","Mozilla 1.8","Win 98+ / OSX.1+","1.8","A"],["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"]] }
[/code]

After this request in Firebug this error:

[code]
oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]] is undefined
var sGroup = oSettings.aoData[ ...iDisplay[iDisplayIndex] ]._aData[0];
[/code]

pktm

Hi s-kAn,

I could reproduce the problem and it seems, that grouping columns and server-side does not work together, as you stated in your inital post.

Unfortunately, I don't see how to fix it, as my JavaScript competence is somewhat rudimentary.
The problem seems t be, that row grouping accesses the html of the table, which is dynamic when using server side. The part of grouping should be handled server side.

From the point of view of a server side programmer, you could
a) insert all data in the html, not using server side at all (which is not very suitable for large amounts of data) or
b) implement the grouping at server-side, add some indicator and then alter the display of the table depending on the indicator. The code of fnDrawCallback() in the row grouping example could be a start.

regards,
pktm

s-kAn

Hi pktm,

Thank you very much, that helped me all the time. Thank you for pickup.
Until solved this problem so - I really still a small amount of this will be in the table and I decided to use the format "JSON" ... ie instead:

[code]
"sAjaxSource": "server_side.php"
[/code]

use it -

[code]
"sAjaxSource": "myfile.json"
[/code]

With him, and "grouping row" and "pagination" work very well. In general, make friends all without problems.)

Thank you again for everything, pktm ... and a huge success in everything.)

jimmynguyc

I've found the solution for "server-side" + "grouping" problem.

The problem lies in the oSettings.aoData, where it only stores the row data that's currently displayed, nothing more.

E.g. If you're displaying 15 items, the oSettings.aoData will only have indexes from 0 to 14. Hence, when the iDisplayIndex > 14 (when you're at page > 1) you will get an "undefined" error.

Here's my solution ...

[code]
var iDisplayIndex = oSettings._iDisplayStart + i;

/* Add this line when using bServerSide = true */
iDisplayIndex = iDisplayIndex % oSettings._iDisplayLength;

var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
[/code]

s-kAn

Thank you for your decision, jimmynguyc.)
I very grateful to you, that shared their solution. I will soon try it ... sure no problems occurred to ...) Many thanks again ...

andrewlorien

jimmynguyc's solution worked for me too
DataTables 1.7.2, serverside data with pagination.
actually, for us oSettings.aiDisplay is always a list of consecutive numbers from 0 to _iDisplayLength - i'm not sure if this is always the case for ajax sources, but if so this will also solve the problem
[code]
// var iDisplayIndex = oSettings._iDisplayStart + i;
var iDisplayIndex = i;
[/code]

i wonder if this is a bug in dataTables? maybe _iDisplayStart should be set to 0 for each new page?