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

在这样的循环中一次又一次地重新定义函数并不是一个好习惯-这就是参数的用途。我无法测试此代码，但是我建议您采用以下方法：

    <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'])"

但这完全取决于您要在此处实现的目标。

Answer 2

为避免无法重新初始化DataTable警告，只需添加

"destroy": true,

在初始化它。当您第二次调用它时，它将再次重新初始化数据表。

了解更多：

“复制到剪贴板”按钮仅在DataTables的第一页上起作用

2 个答案: