jquery datatables - refresh doesn't work

Question

I have an htnl table I build with jquery dataTables. The code I use for that is:

var oTable = jQuery('#webcam-table').dataTable({
   "sPaginationType": "full_numbers",
   "bStateSave": true,
   "aaSorting": [[1,"desc"]],
   "aoColumnDefs": [
     { "bSortable": false, "aTargets": [ 4 ] }
   ]
});

This table also has a form with a checkbox on each row where a user can select one or more and hit a delete button. This uses jquery ajax:

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();
                        }
                    });

                }
            });
        }
    }
});

What this does is remove a row in the table. This is where I have a problem with dataTable as it has pages and when I delete one or more it doesn't refresh the table.

So I thought I should be able to add fnDraw to the code:

jQuery('#deleteform input:checkbox').each(function(){
       if(this.checked){
            jQuery('input:checkbox:checked').parents("tr").remove();
        }
oTable.fnDraw();

I thought this would refresh the table after my AJAX delete and after I've removed the row. But this doesn't even remove the row anymore nor does it update the table accordingly. Of course when I refresh the page manually everything is fine. Any ideas on how I can remove the rows selected and then refresh the dataTable?

drneel · Accepted Answer · 2013-01-16 20:43:59Z

3

The DataTable API has a delete row function.

fnDeleteRow Remove a row for the table

Input parameters:

{mixed}: The index of the row from aoData to be deleted, or the TR element you want to delete
{function|null}: Callback function
{bool} [default=true]: Redraw the table or not

Return parameter:
{array}: The row that was deleted

Code example:

$(document).ready(function() {
  var oTable = $('#example').dataTable();

  // Immediately remove the first row
  oTable.fnDeleteRow( 0 );
} );

answered Jan 16, 2013 at 20:43

drneel

2,9055 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

Hrm, looks like the best option. I guess I have to loop through and delete all that have been selected. Not to mention adding some sort of index.

Collectives™ on Stack Overflow

jquery datatables - refresh doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related