Кнопка «Копировать в буфер обмена» работает только на первой странице DataTables

Question

У меня есть таблица данных, в которой есть столбцы и строки, и одна из них - кнопка copy , которая onclick() запускает функцию копирования и копирует определенную строку в буфер обмена, она работает нормально первая страница, но когда я использую поиск или нумерацию страниц, она не работает, и кнопка не запускает функцию javascript.

Я искал и нашел в StackOverflow, что мне нужно заново инициализировать таблицу данных, которую я пытался, но она выдает ошибку

Предупреждение DataTables: таблица id = datatable - Невозможно повторно инициализировать DataTable. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/3

Я использовал измененный код, который я пробовал после того, как я искал StackOverflow, после чего он выдает ошибку

Предупреждение DataTables: таблица id = datatable - Невозможно повторно инициализировать DataTable. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/3

('#datatable').dataTable({ "fnDrawCallback": function(oSettings) {
  //code
}});
});

<table id="datatable" class="table table-striped table-bordered" class="dass">
  <thead>
    <tr>
      <th>No.</th>
      <th>Student ID</th>
      <th>Reference</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Copy</th>
    </tr>
  </thead>
  <tbody>
    <?php
      $numm=1;
      $stmt = $DB_con->prepare("SELECT * FROM asd);
      $stmt->execute();
      while($row = $stmt->fetch(PDO::FETCH_ASSOC))
      { ?>
        <tr>
          <td>
            <?php echo $row['id']; ?>
          </td>
          <td>
            <?php echo strtoupper($row['stid']); ?>
          </td>
          <td>
            <?php echo $row['ref']; ?>
          </td>
          <td>
            <?php echo $row['fname']; ?>
          </td>
          <td>
            <?php echo $row['lname']; ?>
          </td>
          <td>
            <button onclick="textToClipboard<?php echo $numm;?>()">Copy</button>
          </td>
          <th>
            <script>
              function textToClipboard <?php echo $numm;?> () {
                var space = "       ";
                var x = document.getElementById('datatable').rows[<?php echo $numm;>].cells[1].innerHTML;
                 var y = document.getElementById('datatable').rows[<?php echo $numm;?>].cells[2].innerHTML;
                var z = document.getElementById('datatable').rows[<?php echo $numm;?>].cells[3].innerHTML;
                var text = x.concat(space, y, space, z, space, q, space, w);
                var dummy = document.createElement("textarea");
                document.body.appendChild(dummy);
                dummy.value = text;
                dummy.select();
                document.execCommand("copy");
                document.body.removeChild(dummy);
              }
            </script>
          </th>
        </tr>
        <?php $numm++;
      } ?>
  </tbody>

Как я могу связать это с таблицей данных?

Answer 1

Чтобы избежать повторной инициализации предупреждения DataTable, просто добавьте

"destroy": true,  

при инициализации. Это снова инициализирует данные, когда вы вызываете их во второй раз.

Подробнее:

1. https://datatables.net/reference/option/destroy
2. https://datatables.net/reference/api/destroy() - метод уничтожения

Answer 2

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

    <script>
      function textToClipboard(numm) {
        var space = "       ";
        var x = document.getElementById('datatable').rows[numm].cells[1].innerHTML;
        var y = document.getElementById('datatable').rows[numm].cells[2].innerHTML;
        var z = document.getElementById('datatable').rows[numm].cells[3].innerHTML;
        var text = x.concat(space,y,space, z,space, q,space, w);
        var dummy = document.createElement("textarea");
        document.body.appendChild(dummy);
        dummy.value = text;
        dummy.select();
        document.execCommand("copy");
        document.body.removeChild(dummy);
      }
    </script>

<table id="datatable" class="table table-striped table-bordered" 
           class="dass">
              <thead>
                <tr>
                  <th>No.</th>
                  <th>Student ID</th>
                  <th>Reference</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Copy</th>
                </tr>
              </thead>
              <tbody>
              <?php
              $numm=1;
           $stmt = $DB_con->prepare("SELECT * FROM asd");
           $stmt->execute();
           while($row=$stmt->fetch(PDO::FETCH_ASSOC))
           {

            ?>
            <tr><td><?php echo $row['id']; ?></td>

                  <td><?php echo strtoupper($row['stid']); ?> 
                   </td>
                  <td><?php echo $row['ref']; ?></td>
                  <td><?php echo $row['fname']; ?></td>
                  <td><?php echo $row['lname']; ?></td>
             <td><button onclick="textToClipboard(<?php echo $numm;?>)">>Copy</button></td>
                </tr>
           <?php
                $numm++;
          } ?></tbody>

Итак, сначала определите одну параметризованную функцию, а затем вызовите ее.

Кроме того, я не уверено том, как таблицы данных обрабатывают выбор .rows[numm] после поиска или использования функции нумерации страниц.Поэтому даже более безопасное решение будет включать передачу всех необходимых параметров в вызове функции, что-то вроде этого:

onClick="textToClipboard($row['ref'], $row['fname'], $row['lname'])"

Но это полностью зависит от того, чего вы пытаетесь достичь.