在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此代码它的工作使用，你可以使用这个