Multiple _length, _filter and _info div with serevr-side refresh
Multiple _length, _filter and _info div with serevr-side refresh
Hi,
First, excuse my mistakes : I'm French and not fluent in English, though I do my best to do so ;-)
Everyone on this forum already told you, but I have to tell you this is a great job you do with DataTables. Thanks for your time and for your support, you make our lives easier !
Now, here is my problem :
I'm using DataTables with server-side processing.
The initialisation code is called each time I click on a button (I think you may have a piece of advice to propose me an alternative way to refresh my table). Thus, everytime I click on the button, I get a new _info, _filter and _length div, and the old one remain in place.
In addition to this, when I use the pagination that was generated the first time, it still reads the old data array, whereas the new pagination browses the new data array.
Here is a screenshot of the result : http://yfrog.com/b5multipledivp
I guess there is a method to refresh the table, but did'nt manage to find/use it.
Here is my initialisation :
[code]
tableDetailCA = _$('#tableDetailCAUpdatePeriode').dataTable({
"bAutoWidth": true,
"aoColumns": [
{ "sClass": "dataTablesCentered" },
{ "sClass": "dataTablesCentered" },
null,
null,
{ "sClass": "dataTablesCentered" },
{ "sClass": "dataTablesRight" },
{ "sClass": "dataTablesCentered" },
null
],
"sPaginationType": "two_button",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "services/all/ca/getDetailsCA.xmls",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Ajout de param
First, excuse my mistakes : I'm French and not fluent in English, though I do my best to do so ;-)
Everyone on this forum already told you, but I have to tell you this is a great job you do with DataTables. Thanks for your time and for your support, you make our lives easier !
Now, here is my problem :
I'm using DataTables with server-side processing.
The initialisation code is called each time I click on a button (I think you may have a piece of advice to propose me an alternative way to refresh my table). Thus, everytime I click on the button, I get a new _info, _filter and _length div, and the old one remain in place.
In addition to this, when I use the pagination that was generated the first time, it still reads the old data array, whereas the new pagination browses the new data array.
Here is a screenshot of the result : http://yfrog.com/b5multipledivp
I guess there is a method to refresh the table, but did'nt manage to find/use it.
Here is my initialisation :
[code]
tableDetailCA = _$('#tableDetailCAUpdatePeriode').dataTable({
"bAutoWidth": true,
"aoColumns": [
{ "sClass": "dataTablesCentered" },
{ "sClass": "dataTablesCentered" },
null,
null,
{ "sClass": "dataTablesCentered" },
{ "sClass": "dataTablesRight" },
{ "sClass": "dataTablesCentered" },
null
],
"sPaginationType": "two_button",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "services/all/ca/getDetailsCA.xmls",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Ajout de param
This discussion has been closed.
Replies
Your English is excellent - and much better than my French! ;-)
Thanks for describing the problem so clearly. The issue is, as you have noted, that you are initialising the table multiple times. If you are using server-side processing (which I see you are), then to refresh the table, all you need to do is call 'fnDraw()': http://datatables.net/api#fnDraw
Regards,
Allan
Actually, what I want (and don't manage) to achieve is to update the values of the parameters inside of aoData.
On the forum, I found several ways to change the source of the Ajax call, but I want to keep the same source with different parameters.
[Edit]
I found that the _fnAjaxUpdate(oSettings) might be related to my issue, but I don't manage to make it work.
Moreover, I access it through the oApi object and I'm not sure this is the best way to do so.
Second question : I noticed that you use prefixes for your variables (ao, o, n, an). Is it a convention used in jQuery or something you use ? By the way, what does it stand for ?
[/Edit]
Did you try the fnDraw() API method? That will cause DataTables to do to the server and request the information to be drawn on the page again - i.e. aoData will be refreshed.
Regarding your second question about the variable prefixes - no this isn't a jQuery convention (indeed a few people have "suggested" that I shouldn't use them). What they are is an indicator to show what kind of variable it is - ie. "ao" is an "array of objects", while "o" in an "object". In the same way "n" is a node and "i" is an integer etc. It's not needed, but in a loosely typed language like Javascript I find it useful. It's called Hungarian notation: http://en.wikipedia.org/wiki/Hungarian_notation
Regards,
Allan
Actually, I did try the fnDraw() method. It refreshes the table, but keeps the same data inside.
What I need is to send new parameters to my server-side script. Once I will have sent my new values to the php script, it will return the correct JSON data, and I will use fnDraw (at least, that's the way I think it should work).
To make it simple : how can I send new parameters to my php script without creating a new instance of dataTable ?
Also, thanks for the information about the code notation.
My mistake, everything is working OK with fnDraw(). I just didn't update correctly the value of my javascript variables.
That's really a wonderful tool you developped !
Excellent stuff - thanks for the update. Good to hear you got it sorted :-)
Regards,
Allan