Bootstrap工具提示无法在与数据表的第一个页面不同的页面中工作

Question

我正在开发几个表的数据表，其中某些列的单元格具有引导工具提示。 所以我正在使用：

• 引导框架
• 数据表 。

数据表分为几页。 准备好文档并加载表后，在数据表的第一页中，工具提示可以正常工作，但是下一页的单元格中没有工具提示！

我怎么解决这个问题？

Answer 1

解

每次DataTables重绘表时，都需要使用drawCallback初始化工具提示。 这是必需的，因为在显示第一页时，DOM中不存在第一页以外的页面的TR和TD元素。

DEMO

 $(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：自定义控件在第二页及其后不起作用 。