У меня маленькая проблема ...Для упрощения и извлечения проблемы из моего основного проекта у меня есть простая таблица с несколькими столбцами и некоторыми данными, в последнем столбце есть две кнопки с подсказкой начальной загрузки, но это не работает.Это мой код:
Я использую плагин DataTable v1.10.16 и Boostrap v3.3.7.
<!DOCTYPE html>
<html>
<head>
<title>DataTable - Buttons with ToolTip</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
</head>
<body>
<section class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>LastName</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Jhosson</td>
<td>20</td>
<td>
<button id="ButtonA" class="btn btn-primary" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">A</button>
<button id="ButtonB" class="btn btn-danger" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">B</button>
</td>
</tr>
<tr>
<td>Scalert</td>
<td>Lopez</td>
<td>33</td>
<td>
<button class="btn btn-primary" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">A</button>
<button id="ButtonB" class="btn btn-danger" data-toogle="tooltip" title="Action Name" style="font-size: 9px; font-weight: bold;">B</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[data-toogle='tooltip']").tooltip();
$(".table").DataTable({
"columns": [
{ "data": "Name" },
{ "data": "LastName" },
{ "data": "Age" },
{ "data": "Button" }
]
});
});
</script>
</body>
</html>
Я обнаружил, что , если исключить столбцы свойств в главном экземпляре , , работает без проблем .Но я не могу удалить его, потому что у меня есть другая кнопка, которая выполняет функцию обновления таблицы, и мне нужно установить ее, чтобы сделать Binding / Match with JSON Object.
У кого-нибудь есть идеи, как ее решить?