Bootstrap 工具提示在不同于第一个数据表的页面中不起作用
Bootstrap tooltips don't work in page different from the first of datatables
我正在开发几个数据table,其中一些列的单元格有 bootstrap 工具提示。
所以我正在使用:
- Bootstrap 框架
- Datatables.
数据table分为几页。
当文档准备好并加载 table 时,在数据的第一页table 工具提示工作正常,但下一页的单元格没有工具提示!
我该如何解决这个问题?
解决方案
每次 DataTables 重绘 table 时,您需要使用 drawCallback
初始化工具提示。这是必需的,因为在显示第一页时 DOM 中不存在第一页以外的页面的 TR
和 TD
元素。
演示
$(document).ready(function() {
var table = $('#example').DataTable( {
ajax: 'https://api.myjson.com/bins/qgcu',
drawCallback: function(settings){
var api = this.api();
/* Add some tooltips for demonstration purposes */
$('td', api.table().container()).each(function () {
$(this).attr('title', $(this).text());
});
/* Apply the tooltips */
$('td', api.table().container()).tooltip({
container: 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>
链接
有关更多示例和详细信息,请参阅 jQuery DataTables: Custom control does not work on second page and after。
我正在开发几个数据table,其中一些列的单元格有 bootstrap 工具提示。 所以我正在使用:
- Bootstrap 框架
- Datatables.
数据table分为几页。 当文档准备好并加载 table 时,在数据的第一页table 工具提示工作正常,但下一页的单元格没有工具提示!
我该如何解决这个问题?
解决方案
每次 DataTables 重绘 table 时,您需要使用 drawCallback
初始化工具提示。这是必需的,因为在显示第一页时 DOM 中不存在第一页以外的页面的 TR
和 TD
元素。
演示
$(document).ready(function() {
var table = $('#example').DataTable( {
ajax: 'https://api.myjson.com/bins/qgcu',
drawCallback: function(settings){
var api = this.api();
/* Add some tooltips for demonstration purposes */
$('td', api.table().container()).each(function () {
$(this).attr('title', $(this).text());
});
/* Apply the tooltips */
$('td', api.table().container()).tooltip({
container: 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>
链接
有关更多示例和详细信息,请参阅 jQuery DataTables: Custom control does not work on second page and after。