在jquery datatable中動態添加和刪除行

Question

在jquery數據表中，我正在動態添加行，同時單擊按鈕。但在添加新行時，如果表中存在類似的行，它應該自動刪除。

假設在數據表中我有以下數據。

ROW1：A B C d 行2：P Qř小號 ROW3：U V W X

現在我要添加像下面一個新的。

ROW4：P Q [R小號

但是這個新的一個是在數據表中已經存在所以這個現有的應自動同時加入這個新刪除。你可能會想，爲什麼我們需要再添加一個。因爲，儘管它在表格中看起來像一樣，但在數據庫中卻是不同的。

有人可以幫助我達到這個要求。

Answer 1

這是一個工作fiddle動態添加行，並刪除它是否已經存在之前添加。

HTML

<!-- INDEX TO ADD ON THE DATATABLE --> 
<select id="recIndex"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
</select> 
<!-- BUTTON TO ADD ROW --> 
<input type="button" name="addRow" value="Add Row"> 

<!-- DATATABLE --> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>No #</th> 
       <th>Column 1</th> 
       <th>Column 2</th> 
       <th>Column 3</th> 
       <th>Column 4</th> 
       <th>Column 5</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>No #</th> 
       <th>Column 1</th> 
       <th>Column 2</th> 
       <th>Column 3</th> 
       <th>Column 4</th> 
       <th>Column 5</th> 
      </tr> 
     </tfoot> 
    </table> 

JS

在下面的代碼，我檢查的記錄是通過檢查每一行的第一個TD值在數據表中存在與否。如果提供的索引計數器值在第一個TD中，那麼我假設已經存在。然後我添加一個.remove類去除那一行。希望你明白我的觀點。

$(document).ready(function() { 
    var $myTable = $('#example'); 
    var t = $myTable.DataTable(); 

    $('input[name="addRow"]').click(function() { 
     var index = $('#recIndex').val(); 
     addRow(index); 
    }); 

    function addRow(counter) { 
     // Check if the counter record is already exist in DataTable 
     // TODO: Check and provide functionality as per your requirements. Below code is done just for an example. 
     $myTable.find('tr').each(function() { 
      if($(this).find('td:first').html() == counter) { 
       $(this).addClass('remove'); // If you found the counter add .remove class 
      } 
     }); 

     // Delete row by using remove class and draw 
     t.row('.remove').remove().draw(false); 

     // Add new row as per index counter 
     t.row.add([ 
      counter, 
      counter +'.1', 
      counter +'.2', 
      counter +'.3', 
      counter +'.4', 
      counter +'.5' 
     ]).draw(false); 
    } 
}); 

Answer 2

$(document).ready(function() { 
    $('#add-new-button').on('click',function(){ 
     var rData = [ 
      test1, 
      test1, 
      '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>', 
      '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>' 
     ]; 
     $('#dataTable').DataTable().row.add(rData).draw(false); 
    }); 

    $('#dataTable').on('click', '.update', function() { 
     var pageParamTable = $('#dataTable').DataTable(); 
     var tableRow = pageParamTable.row($(this).parents('tr')); 
     var rData = [ 
      test1, 
      test1, 
      '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>', 
      '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>' 
     ]; 
     pageParamTable 
       .row(tableRow) 
       .data(rData) 
       .draw(); 
    }); 
    $('#dataTable').on('click', '.delete', function() { 
     var pageParamTable = $('#page-params').DataTable(); 
     var tableRow = pageParamTable.row($(this).parents('tr')); 
     pageParamTable.row(tableRow).remove().draw(); 
    }); 
}); 

我正在使用我們的projescts此代碼它的工作使用，你可以使用這個