方法销毁数据表
Posted
技术标签:
【中文标题】方法销毁数据表【英文标题】：Method Destroy DataTables 【发布时间】：2019-04-15 11:26:47 【问题描述】：我的页面中有很多表格。
它们使用 DataTables jquery 和 keytable 插件初始化。
当我在 espefic 表中使用方法 $("#mytable1").destroy() 时，所有其他人丢失 keytable。
有人知道为什么会这样吗？
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Table</title>
<!-- Bootstrap -->
<link href="gentemplate/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/af-2.3.2/b-1.5.4/cr-1.5.0/fc-3.2.5/kt-2.5.0/sc-1.5.0/sl-1.2.6/datatables.min.css"/>
</head>
<body>
<table id="example" class="display table" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
<hr />
<button onclick="active()" type="button">Active</button>
<table id="example3" class="display table" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
<hr />
<table id="example2" class="display table" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/datatable/datatables.js"></script>
<script>
$(document).ready(function()
var table = $('#example').DataTable(
deferRender: true,
scrollY: 200,
scrollCollapse: true,
keys: true
);
var table2 = $('#example2').DataTable(
deferRender: true,
scrollY: 200,
scrollCollapse: true,
keys: true
);
);
function active()
if(isDataTable("example3"))
$('#example3').DataTable().destroy();
$('#example3').DataTable(
deferRender: true,
scrollY: 400,
scrollCollapse: true,
keys: true
);
function isDataTable(idGrid)
return $.fn.DataTable.isDataTable("#" + idGrid);
</script>
</body>
</html>
测试流程：
-
点击激活，检查所有表格是否有键导航。
再次点击激活，只有example3有按键导航
【问题讨论】：
请添加一些代码，显示您如何添加 keytable 以及您如何销毁以及在何处销毁。 好的，我去发布一个答案，因为我无法编辑我的问题。 好的，我已经编辑了你的问题，你可以删除 ans 好吧。谢谢 所以这里是工作代码。究竟是什么问题。 jsfiddle.net/j5oha0mc/1 【参考方案1】：按照this example，你需要导入keyTable js和css文件
js 和 css 文件
https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js
https://cdn.datatables.net/keytable/2.4.1/css/keyTable.dataTables.min.css
在 Datatable 初始化器中，只需像这样添加 keys attr
$('#example').DataTable(
keys: true
);
工作jsfiddle
【讨论】：
在我的示例中，“lib/datatable/datatables.js”键表是连接的。 Datatables 本身给了我这个选项。在此示例中验证密钥是否正常工作。当您单击销毁时，keytable 在所有表中都停止了。 live.datatables.net/vinerahu/2/edit以上是关于方法销毁数据表的主要内容，如果未能解决你的问题，请参考以下文章