数据表单元格中带有引导工具提示的按钮 [不工作]答案

【问题标题】：Buttons with Bootstrap ToolTip inside DataTable Cells [Not working]数据表单元格中带有引导工具提示的按钮 [不工作]
【发布时间】：2018-05-11 17:19:31
【问题描述】：

我有一个小问题......为了简化和提取我的主要项目的问题，我有一个简单的表，其中包含几列和一些数据，最后一列有两个带有引导工具提示的按钮，但这不起作用。这是我的代码：

我正在使用 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>

我发现如果消除主实例中的属性列，它可以正常工作。但是，我无法删除它，因为我有其他按钮执行表更新功能，我需要将其设置为与 JSON 对象进行绑定/匹配。

有人知道如何解决它吗？

【问题讨论】：

标签： jquery html datatable twitter-bootstrap-tooltip

【解决方案1】：

我在使用 datatable jquery 插件时遇到了类似的问题。在第一页中，所有按钮都可以正常工作，但在其他页面中它们不起作用。如果您使用的是插件，那么我的建议是不要使用插件或禁用分页。

【讨论】：

如果您可以添加一些代码来帮助您提供答案，那就太好了！ :)
$('#example').dataTable( { "paging": false } );
感谢@RobinKhan 的回复，我禁用了分页，但问题仍然存在（尽管在我的具体情况下，这个解决方案是不可能的，因为我的主应用程序有几千条记录，我制作在 500 个结果中查询 500 个）。另一方面，禁用 jQuery “我认为不可行”，因为 DataTable 插件需要 jQuery 才能工作。
抱歉帮不了你，希望你能尽快找到解决办法