Pagination error with server-side table

coyaba

Hi.

First: congrats for this piece of software. It's by far the best table script I found yet - especially with the new server-side features in your new version 1.5.

I wanted to build a table which gets its data using ajax and also contains per-row 'links' to delete the respective row. At first I had problems to solve the latter task since the click event handler did not work as I expected. Maybe that's because the table structure is generated and thus not accessible for the click handler..?
At last I solved this problem using the jQuery live event handler.

I had a second problem when I used fnDeleteRow to delete a row from the table (using ajax since server-side). The row got deleted and the table display got updated - respecting sort or search/filter settings. The problem: after the deletion the iDisplayStart decreased by iDisplayLength so the table jumped one page back instead of 'updating' the current view.
I searched the source of DataTables and found a condition in function fnDeleteRow which exactly does that (starting line 1032 in V 1.5 beta 5). I gave it a try and removed the block and voila: it works like a charm.

I'm not sure if this a bug, maybe I did not get the point of these lines ;-)

Regards,
Harald

allan

Hi Harald,

Thanks very much for your kind words about DataTables!

1. It sounds like the click event you are applying isn't being applied to all of the rows in the table. Perhaps it is only being applied to the rows visible on the page at initialisation time? To see how events can be applied I've got two demos:

http://datatables.net/examples/example_events_pre_init.html
http://datatables.net/examples/example_events_post_init.html

2. Good call. The block is needed for paging back when you've got no more records to show on a page, but I managed to get my condition for it wrong. I've corrected this in 1.5 beta 6.

Regards,
Allan

coyaba

1. I've set up a sample page illustrating my problem with the click event:
http://www.faszination-china.com/dataTables_demo-fnGetNodes.click.php

As you can see in the source I tried to implement it as described in the mentioned demos but the alert does not get triggered.

Howerver Inspired by this thread http://datatables.net/forums/comments.php?DiscussionID=58 I changed my approach and added special DIVs to insert clickable 'links':
http://www.faszination-china.com/dataTables_demo-div.live.php

Every DIV with an id prefixed with dta_ (= 'datatables action') inside a datatable cell gets clickable. The id also contains the action to be triggered and the entry ID, e.g. dta_del_0815 (=delete entry 0815).

2. hm, you're sure you fixed it? It still does not work for me yet.
From jquery.dataTables.js (1.5.0 beta 6)
...
if ( oSettings._iDisplayStart + oSettings._iDisplayLength >= oSettings.aiDisplay.length )
{
oSettings._iDisplayStart -= oSettings._iDisplayLength;
...

Say iDisplayStart is 500, items per page (iDisplayLength) is 10 and since I deleted a row oSettings.aiDisplay.length is 9. As far as I understand the condition above is almost ever true and thus iDisplayStart gets decremented..

Regards,
Harald

allan

Hi Harald,

1. The issue you are facing with this part is that when DataTables redraws the table for the server-side processing, it re-creates the DOM for the table - so all currently assigned event handlers are lost (since the old DOM is destroyed). This can be overcome using fnDrawCallback to re-assign the event handlers or with jQuery live event, as you pointed out. This is an example of how to achieve what you are looking for with fnDrawCallback.

[code]
var obj_table;
$(document).ready(function() {
obj_table = $("#example").dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [{"sTitle":"id"},{"sTitle":"channel"},{"sTitle":"pub date"},{"sTitle":"filter date"},{"sTitle":"mediatype","sClass":"center","bSortable":false},{"sTitle":"content","bSortable":false},{"sTitle":"keywords","bSortable":false},{"sTitle":" ","bSortable":false}],
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"aaSorting": [[3,'desc']],
"sAjaxSource": "adm_news_ajaxDatasource.php",
"fnDrawCallback": function() {
$( obj_table.fnGetNodes() ).click( function () {
alert("clicked");
} );
}
} );

obj_table.fnSetFilteringDelay(500);
} );
[/code]

You might find my Visual Event bookmarklet useful when debugging events in Javascript: http://www.sprymedia.co.uk/article/Visual+Event

2. Oops - I got all confused with the server-side processing. The original condition was in fact correct when using client-side processing. fnDeleteRow() is very much client-side orientated (as are most of the other API functions), as when the table re-draws it will simply pull the information from the server again and the row will be displayed again! What is really needed is a way to tell the server that this particular row should be excluded. I think that's probably best done in either a custom API plug-in, or a custom server pull function which will tell the server which rows should be excluded.

Regards,
Allan

cesarchas

First of all, congratulations for this superb peace of work.

When having a table, and clicking on the 2nd page or filtered table,

[code]
$('#example tr:gt(0)').live('click', function() { //works
$('#example tr:gt(0)').click(function() { // doesnt work
[/code]

Regards,
Cesar

allan

Hi Cesar,

This is the top FAQ: http://datatables.net/faqs#events :-). Live events are good :-)

Allan