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

问题描述

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

我正在使用 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 对象进行绑定/匹配。

有人知道如何解决它吗？

标签： jqueryhtmldatatabletwitter-bootstrap-tooltip

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

问题描述

解决方案

推荐阅读