delete row in table
delete row in table
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:
[code]
Name
...
Delete
some data
...
[/code]
Just building the table is easy:
[code]
jQuery('#webcam-table').dataTable({
"sPaginationType": "full_numbers",
"bStateSave": true,
"aaSorting": [[1,"desc"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 4 ] }
]
});
[/code]
I've now added an AJAX implementation to delete the row:
[code]
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();
}
});
}
});
}
}
});
[/code]
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.
[code]
Name
...
Delete
some data
...
[/code]
Just building the table is easy:
[code]
jQuery('#webcam-table').dataTable({
"sPaginationType": "full_numbers",
"bStateSave": true,
"aaSorting": [[1,"desc"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 4 ] }
]
});
[/code]
I've now added an AJAX implementation to delete the row:
[code]
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();
}
});
}
});
}
}
});
[/code]
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.
This discussion has been closed.
Replies
[code]
var aTrs = oTable.fnGetNodes();
for ( var i=0 ; i