Server-side Processing, fnDraw(oSettings) sends proper iDisplayStart, but changes to previous page.

Danly_Dan

I am using server-side processing and have functionality to support the addition and deletion of rows. There also is row grouping being done to add to the complexity.

When I add a new row to a row grouping the process is to first make an AJAX call to insert the record into the database and then a call to redraw the table and this works fine. However, the same process for removing a row results in an issue.

A call is made to remove the record from the database and upon a successful request the table is redrawn. The iDisplayStart value stays at the current value so the correct records are shown, but the page is changed to the one prior to what was selected (unless on the first page, then it stays because there is no prior one). If a second delete is made at this time, the call for the table to be redrawn will now have the iDisplayStart of the wrong page and the incorrect records will be shown.

The add function is using fnAddData([HTMLforRow], false) and the delete function is using fnDeleteRow(rowtr, null, false).

-----
To expand in a more visual way:

Initial Load:
Records from database for row 1-100
Page 1
iDisplayStart = 0
iDisplayLength = 100 (Always set to 100 records)

Browse to Page 3:
Records from database for row 200-300
Page 3
iDisplayStart = 200

Add Row:
Records from database for row 200-300
Page 3
iDisplayStart = 200

Delete Row:
Records from database for row 200-300
Page 2
iDisplayStart = 100

allan

Hi,

Thanks for the details about this problem - I've just committed a fix to DataTables that addresses this, which you can download in the 1.9.2.dev nightly: http://datatables.net/download .

Having said that I would urge considerable cation here - fnAddData and fnDeleteRow really should _not_ be used with server-side processing. These two methods are entirely client-side based, they have absolutely no knowledge of your server-side environment, so as soon as you do the next draw, the data will be removed and replaced with what the server knows about (its in server-side processing mode after all!).

I presume that you are doing some kind of editing with DataTables here? You might be interested in having a look at a new plug-in I've been working on for DataTables which adds full editing abilities, including a well defined server communication protocol for updating the database with the data from the client-side: http://editor.datatables.net .

Regards,
Allan

Danly_Dan

Hi Allan,

I will try out the nightly release.

I'll review the concept to no longer use fnAddData and fnDeleteRow, but in terms of both the processing works along the following idea:

1. Action to Add or Delete is made
2. Appropriate data is posted to server through AJAX
3. Server makes database calls to insert, update, delete, etc.
4. Server returns the data of the newly added or deleted row with status
5. For addition, fnAddData is called with the returned data to add the row instead of redrawing the table.

You are correct in that editing is what I am looking for and I will definitely review your new plug-in.

Thank you.
Dan

Danly_Dan

After applying the nightly release I no longer have the functionality of the page staying after an action was completed. Instead, now after a deletion or addition (which was working as desired) the first page loads instead.

Reviewing the editor, I do not believe it will work for my purposes as I need row grouping and specific ordering within those groups.

allan

> Instead, now after a deletion or addition (which was working as desired) the first page loads instead.

It sounds like the table is being resorted and refiltered - that causes the display to revert to the first page. Are you still using fnAddData (and it's friends)?

Can you show me the code that you are using?

> Reviewing the editor, I do not believe it will work for my purposes as I need row grouping and specific ordering within those groups.

Row grouping can be done in DataTables with a hidden column that defines the grouping (all rows belonging to group 1 would have a "1" for example). Then the secondary sorting, that applied by the user, would be shown (and visually appear to be the primarily sort). Row headers could even be drawn in if needed, to define a group :-).

Regards,
Allan

Danly_Dan

I modified my code further to fully drop the fnAddData (as well the fnDeleteRow) and was using fnDraw on its own. After further testing, I found that I had to load the current table's settings and pass those onto fnDraw.

I have this working now.

[code]
$( "#dialog-confirm" ).dialog({
resizable: false,
dialogClass: 'add-dialog',
height:245,
width: 325,
modal: true,
buttons: {
"Delete Item": function() {
$.post("/admin/del-item",{'item_id':item_id},
function(){
var oSettings = oTable.fnSettings();
oTable.fnDraw(oSettings);
}, "json");

$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
[/code]

allan

> I have this working now.

Fantastic :-).

Regards,
Allan