Question

我有点问题......为了方便和提取我的主项目的问题，我有一个简单的表，几列和一些数据，最后一列有两个按钮与bootstrap工具提示，但这是行不通的。这是我的代码：

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

有人知道如何解决它？

Answer 1

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

DataTable单元格内的Bootstrap ToolTip按钮[不工作]

1 个答案: