У меня на странице много таблиц.
Они инициализированы с DataTables jquery с плагинами с ключами.
Когда я использую метод $("#mytable1").destroy() в таблице espefic, все остальные теряют таблицу ключей .
Кто-нибудь знает, почему это происходит?
<!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>
Тестовый поток:
- Нажмите активную, проверьте, все ли таблицы имеют навигацию по клавишам.
- Снова нажмите активную, только в примере3 есть навигация по клавишам