fnDraw()

boyakoosha

Hi there,

I'm having a problem with redrawing the table, here's my scenario. the initial draw of the table is fine:
jQuery('#userTable').dataTable({
"sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]], // 0 = column to sort by
"bProcessing": true
});


Now I have a modal jQueryUI Dialog on this html page for adding and editing users. when I click update on the modal (jquery post to the server) I then call another $.load method to load my new table HTML from a partial view:

$('#userList').load('/Settings/UserDetails', function () {
jQuery('#userTable').dataTable().fnDraw();
});

"userList" is my placeholder div with which the table resides within. My table has a column with "edit" and "delete" hyperlinks which are triggered via jQuery ( jQuery('.stdtable a.delete').click(function (e) {)

Now then, when a user has been added and fnDraw() is called (after the HTML has been pulled back via the AJAX call...) my jQuery delete and edit method are not registered and I can click to my hearts content but no joy.

Can anyone shed any light on this for me please!?

Many thanks

Amazing table code by the way. much respect.

allan

If I understand correctly, you are replacing the entire "old" table's HTML with your new HTML. Is that correct? DataTables won't like that, because you haven't told it that the old table has been overwritten, and it has now way of knowing that is the case. What you can do if you want to overwrite the whole table is use fnDestroy and then carry on as normal.

Allan

boyakoosha

Allan, I am doing that yes you are correct. When to call fnDestroy?

allan

Just before you replace the HTML. That will allow DataTables to release the table, so you can then nuke it.

Allan

boyakoosha

Ok so I tried this:
// redraw the table
$('#userTable').dataTable().fnDestroy(true);
// refresh the grid, ajax in the background
$('#userList').load('/Settings/UserDetails', function () {
jQuery('#userTable').dataTable({
"sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]], // 0 = column to sort by
"bProcessing": true
});
});

using fnDraw() instead of the whole init script (it's there for testing) draws the table properly now, but the hyperlinks in the end column don't respond to clicks, very odd. If I inspect the re rendered HTML after, everything is the same, the class names on the edit/delete links are the same so they should be picked up fine by the jQuery that handles their click events.

Any other ideas?

allan

> so they should be picked up fine by the jQuery that handles their click events.

If you are using live events then yes - are you? Does Visual Event show events attached to the elements: http://sprymedia.co.uk/article/Visual+Event+2

Allan

boyakoosha

I will check after the weekend and let you know.

Thanks a lot for your help Allan

boyakoosha

ok tried that with the following
$('#userTable').dataTable().fnDestroy(true);

$("#userTable").trigger("refreshUserList");

which in turn calls the new ON function but still Edit and Delete don't work. Interestingly if I don't call any datable refreshing and simply let the LOAD command run, Edit and Delete do work it's only when trying to do anything with the datatable after a reload of the new data that it doesn't work.

$("#userTable").on("refreshUserList", function () {

// refresh the grid, ajax in the background
$('#userTable').load('/Settings/UserDetails', function () {
jQuery('#userTable').dataTable({
"sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]], // 0 = column to sort by
"bProcessing": true
});
});
});

allan

How are you doing the edit and delete event handlers? With 'live' or delegated event handlers? ( http://datatables.net/faqs#events ).

Allan

boyakoosha

Rendered as HTML on the page in a for loop -

Edit   Delete

the datatables are initialized in the document.ready declaration

boyakoosha

Man, still getting nowhere with this. anyone able to help please?

boyakoosha

Ok ok after a day of a lot of trial and error I've got it all sorted! :)