Simple javascript functions seem to break on jQuery Datatables after paging -

Simple javascript functions seem to break on jQuery Datatables after paging -

i'm having interesting problem hope there's easy solution to. i'm using jquery datatables plugin (datatables.net) , have paging set total numbers. in rows, have delete button when clicked performs jquery function. function calls external source handle delete in database, , uses .remove() remove row ui.

this works flawlessly until utilize paging. if have more 10 records, , click next page, no longer works. here's code:

jquery('.deleterecord').click(function(){ var conf = confirm('continue delete?'); if(conf) jquery(this).parents('tr').fadeout(function(){ jquery(this).remove(); jquery.jgrowl("record has been removed!"); }); homecoming false; });

so have link in row:

<a class="deleterecord">delete</a>

this calls click function. if click next page through paging on table, way can function work 1 time again if refresh page cookies enabled remember page.

any ideas hope??? :(

datatables has built-in function removes rows, fndeleterow (documentation-link). handle right state of pagination and, more important, actual info within plugin itself.

i created little illustration on jsbin show you.

i used markup 1 of examples, may little messy.

so basically, bind click-handler on row , delegate event on td, same button, alter .center in handler .deleterecord , prevent default event.

the difference this-variable used when calling fngetposition actual id of row, need deleterow-function. need utilize $(this).parent()[0] instead pass td - element rather button.

this code of handler , init-call datatables-plugin sake of completeness:

$('#example tbody tr').on('click', '.center', function () { var apos = otable.fngetposition(this); otable.fndeleterow(apos[0]); }); // init datatables otable = $('#example').datatable({ "spaginationtype": "full_numbers" });

inside handler, you'd need set off ajax - phone call database delete right row , execute code-snippet in callback, if server returns positive result.

jquery jquery-datatables