I have a table that is built on page load so just a typical DOM data source. My table also has a form with checkboxes so someone can delete a row:
Just building the table is easy:
I've now added an AJAX implementation to delete the row:
If I do this it removes the row in the table but with pagination showing 10 rows it removes one of them leaving 9. I need to refresh this somehow and wasn't clear what is the best way to achieve this? I can refresh the page but that would defeat the point of doing this AJAX implementation. Any advice would be appreciated.
<form id="deleteform" name="myform" action=""> <table id="webcam-table"> <thead> <tr> <th>Name</th> <th>...</th> <th><input type="checkbox" name="checkboxselectall" title="Select All" /> <button type="submit" class="deletebutton" name="delete_video" title="Delete the selected videos">Delete</button></th> </tr> </thead> <tbody> <tr > <td>some data</td> ... <td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion"/></td> </tr> </tbody> </table> </form>
Just building the table is easy:
jQuery('#webcam-table').dataTable({ "sPaginationType": "full_numbers", "bStateSave": true, "aaSorting": [[1,"desc"]], "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 4 ] } ] });
I've now added an AJAX implementation to delete the row:
jQuery(".deletebutton").on("click", function(e) { e.preventDefault(); //cancel click event on start var testchecked = jQuery(':checkbox:checked').length; if (testchecked == 0) { alert('Please select at least one video'); e.preventDefault(); } else { if (confirm("Are you sure you want to delete the selected videos?")) { var checked = jQuery('input:checkbox:checked').map(function () { return this.value; }).get(); var $this = jQuery(this); jQuery.ajax({ type: 'POST', url: 'index.php?option=com_recordings&task=deletevideos&format=raw', data: {checkedarray:checked}, success: function(data){ jQuery('#deleteform input:checkbox').each(function(){ if(this.checked){ jQuery('input:checkbox:checked').parents("tr").remove(); } }); } }); } } });
If I do this it removes the row in the table but with pagination showing 10 rows it removes one of them leaving 9. I need to refresh this somehow and wasn't clear what is the best way to achieve this? I can refresh the page but that would defeat the point of doing this AJAX implementation. Any advice would be appreciated.