'Copy to the clipboard'按钮仅在数据表的第一页上有效

Question

>我有一个数据表，其中有列和行，其中一个是复制按钮，它onclick()启动复制功能并将特定行复制到剪贴板，它在第一页上正常工作，但是当我使用搜索或分页时，它不起作用，并且按钮不会启动javascript功能。

我在 StackOverflow 中搜索并发现我需要重新启动数据表，我尝试过，但它给出了错误

数据表警告：表 id=数据表 - 无法重新初始化数据表。有关此错误的详细信息，请参阅 http://datatables.net/tn/3

我使用了搜索StackOverflow后尝试的修改代码，之后它给出了错误

数据表警告：表 id=数据表 - 无法重新初始化数据表。有关此错误的详细信息，请参阅 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

要避免 无法重新初始化数据表 警告，只需添加

"destroy": true,  

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

阅读更多：

1. https://datatables.net/reference/option/destroy
2. https://datatables.net/reference/api/destroy() -- 销毁方法