Large html table

Polou

Hello,

I need some help for my table.
I'm using DataTable 1.9.4.

I have (for now) 350 row in my database that i want to show in one html table (18 columns) and 25 rows by page
The number of rows will be thousand by the time...

The problem is that processing is really long (10sec for 350rows on FF) and i don't see how can i using post processing or other tips you give since i first make the html table, then dataTable(), then show the page. I'm not quite skilled in that jquery and server-side stuff :D

Currently i'm using this options :
[code]
$('#reg').dataTable( {
"bDeferRender": true,
"bSortClasses": false,
"bLengthChange": false,
"iDisplayLength": 25,
"bFilter": false
} );
[/code]

Hope we'll can help me !
Thanks

allan

350 rows is not a large table! 50'000+ is a large table.

Can you link to the page please, it absolutely show not take 10s in Firefox for just 350 rows.

Allan

Polou

Hi Allan,

I'm sorry but the website (and the table) contains private data (clinical trial)... :/
Screenshot of firebug : http://uppix.net/0/e/d/6bdb58c459e22511f0c23c8cfbad4.png


Before using your jquery plugin, i was using my own php script but it was just doing pagination (same page loaded in 1sec).
And i need your sorting method wich stay when moving between pages!

allan

That looks like its the accueil.php script which is taking a huge amount of time to create the HTML page, not DataTables.

What happens if you disable your $().dataTable() call?

Allan

Polou

If i disable $().dataTable() call the loading is still 7.3sec :/
So it's not because of your plugin :D

allan

Good for me. Not so much for you... :-)

I'd suggest looking at the SQl queries if you have any and seeing if they can be optimised, or break the table into pages if you have to.

Allan

Polou

I have a script which break my table into pages of 25 rows. And pagination "next" with an onclick script to change tha idTab and get the next 25 rows.

But i don't know how to use this with your plugin... Who can i change the next and previous buttons to add a onclick script ?

rma

Hi Polou,

Did you checked http://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html ? Also, you can use "iDisplayLength" : 25 which will set the size to 25 by default.

allan

You are loading the whole table un front by the looks of things - no configuration of DataTables is going to speed that up. You could try using server-side processing, but you'll need to implement that in a script on the server.

Allan

Polou

Hi,

Yes im loading the whole table html before because it's not just printing the database, i call other functions to calculate and then print the data into . I don't know if you understand me ^^

Well, i made a script which give me an array with everything i need to show in the table (calculations and other stuff like links,...) So this array is ready to be used by DataTable().
It's like a server-side process but not with json file, with php object...

Can i use a php object (the array of my final table), so DataTable can take it and draw it at the end ??
Like this :
[code]
$('#reg').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": <?php $array; ?>
});
[/code]

allan

> Can i use a php object (the array of my final table), so DataTable can take it and draw it at the end ??

No - DataTables is Javascript, not PHP - but you can use a JSON object (PHP's json_encode function).

Allan

Polou

Hi allan,

So i now have this json object :
[code]
{
"0": {
"SEL": "",
"TEC": "demo",
"Service": "Maladies",
"ID": "88888f",
"Arm": "T",
"Name": "Bar",
"FirstName": "Foo",
"Prenate": "03/05/2013",
"Data1": "empty",
"Nate": "03/05/2013",
"Data0": "full",
"J9": "13/05/2013",
"J56": "18/06/2013",
"ISAT": "empty",
"Out": "empty",
"pati": "0",
"36f": "empty",
"file": "No"
},
"1": {
"SEL": "",
"TEC": "demo",
"Service": "Maladies",
"ID": "88888f",
"Arm": "T",
"Name": "Bar",
"FirstName": "Foo",
"Prenate": "03/05/2013",
"Data1": "empty",
"Nate": "03/05/2013",
"Data0": "full",
"J9": "13/05/2013",
"J56": "18/06/2013",
"ISAT": "empty",
"Out": "empty",
"pati": "0",
"36f": "empty",
"file": "No"
}
}
[/code]
I cut it because it goes till "321"...

How can i use it now ?
Right now, i'm calling a json.php which contains the "string" above
[code]
$('#regParticip').dataTable( {
"bProcessing": true,
"sAjaxSource": "registres/json.php",
"bDeferRender": true,
"bSortClasses": false,
"bLengthChange": false,
"iDisplayLength": 25,
"bFilter": false
} );
[/code]

But firebug returns me
[quote]
TypeError: aData is undefined

for ( i=0 ; i