1

我有一个用 jquery dataTables 构建的 htnl 表。我使用的代码是：

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

该表还有一个表单，每行都有一个复选框，用户可以在其中选择一个或多个并点击删除按钮。这使用 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();
                        }
                    });

                }
            });
        }
    }
});

这样做是删除表中的一行。这是我对 dataTable 有问题的地方，因为它有页面，当我删除一个或多个时，它不会刷新表。

所以我想我应该能够添加fnDraw到代码中：

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?

4

1 回答 1

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 );
} );
于 2013-01-16T20:43:59.167 回答