1

jquery dataTables で作成した htnl テーブルがあります。そのために使用するコードは次のとおりです。

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

このテーブルには、ユーザーが 1 つ以上を選択して削除ボタンを押すことができる各行にチェックボックスがあるフォームもあります。これは 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();
                        }
                    });

                }
            });
        }
    }
});

これが行うことは、テーブル内の行を削除することです。これは、ページがあり、1つ以上を削除してもテーブルが更新されないため、dataTableに問題がある場所です。

fnDrawだから私はコードに追加できるはずだと思った：

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

AJAX を削除した後、行を削除した後、これによりテーブルが更新されると思いました。ただし、これは行を削除することも、それに応じてテーブルを更新することもありません。もちろん、ページを手動で更新すると、すべて問題ありません。選択した行を削除して dataTable を更新する方法についてのアイデアはありますか?

4

1 に答える 1

3

DataTable APIには行削除機能があります。

fnDeleteRow テーブルの行を削除します

入力パラメータ:

  • {mixed}: 削除する aoData の行のインデックス、または削除する TR 要素
  • {function|null}: コールバック関数
  • {bool} [default=true]: テーブルを再描画するかどうか

戻り値:
{array}: 削除された行

コード例: 

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

  // Immediately remove the first row
  oTable.fnDeleteRow( 0 );
} );
于 2013-01-16T20:43:59.167 に答える