Не хочу копировать скрытые строки в JQuery

Question 1

У меня есть таблица, в которой я создал кнопку для удаления строки и возможность Копировать: Моя проблема - кнопка удаления работает нормально, однако после удаления строки она все еще копирует удаленную строку, которую я не хочу, чтобы вы могли запустите фрагмент кода для рабочего примера. Я хочу, чтобы после удаления строки кнопка копирования копировала только видимые строки, а не скрытую ... пожалуйста, помогите заранее:

// Code for Remove Rows
$('.table tbody').on('click', '.btn', function() {
  $(this).closest('tr').remove();
});
// Code For Export Option           
$(document).ready(function() {
  $('#enquirytable').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy',
    ]
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">
<table class="table table-hover table-striped table-bordered" id="enquirytable">
  <thead>
    <tr>
      <th>admission_no</th>
      <th>roll_no</th>
      <th>Action </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Student 1</td>
      <td>95</td>
      <td class="text-center"><button type="button" class="btn">Remove</button></td>
    </tr>
    <tr>
      <td>Student 2</td>
      <td>105</td>
      <td class="text-center"><button type="button" class="btn">Remove</button></td>
    </tr>
    <tr>
      <td>Student 3</td>
      <td>110</td>
      <td class="text-center"><button type="button" class="btn">Remove</button></td>
    </tr>
  </tbody>
</table>

javascript jquery html

0

Kapil Rao 22 Окт 2019 в 10:22

Answer

Вы удаляете строку из html, но ее также необходимо удалить из объекта данных. Установите datatable в переменной, удалите строку, используя ее, и перерисуйте таблицу. см. ниже код

 // Code For Export Option           
 $(document).ready(function() {
    var enquiryTable = $('#enquirytable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 
        ]
    });

   $('.table tbody').on('click', '.btn', function(){
        enquiryTable
        .row( $(this).closest('tr') )
        .remove()
        .draw();
   });
 });

3

Bhushan Kawadkar 22 Окт 2019 в 10:28

Рада помочь вам :)

–

Bhushan Kawadkar

22 Окт 2019 в 11:31

Question 2

Вы удаляете строку из html, но ее также необходимо удалить из объекта данных. Установите datatable в переменной, удалите строку, используя ее, и перерисуйте таблицу. см. ниже код

 // Code For Export Option           
 $(document).ready(function() {
    var enquiryTable = $('#enquirytable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 
        ]
    });

   $('.table tbody').on('click', '.btn', function(){
        enquiryTable
        .row( $(this).closest('tr') )
        .remove()
        .draw();
   });
 });

3

Bhushan Kawadkar 22 Окт 2019 в 10:28

Рада помочь вам :)

–

Bhushan Kawadkar

22 Окт 2019 в 11:31

Не хочу копировать скрытые строки в JQuery

1 ответ

Похожие вопросы

Новые вопросы

javascript