Не хотите копировать скрытые строки в Jquery - PullRequest
0 голосов
/ 22 октября 2019

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

// 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>

1 Ответ

3 голосов
/ 22 октября 2019

Вы удаляете строку из 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();
   });
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...