引导工具提示不't在与第一个数据表不同的页面中工作

Bootstrap tooltips don't work in page different from the first of datatables

本文关键字：数据表 工作 第一个 工具提示      更新时间：2023-09-26

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

  • Bootstrap框架
  • 数据表

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

我该如何解决这个问题？

解决方案

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

演示

$(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>

链接

有关更多示例和详细信息，请参阅jQueryDataTables:Custom控件在第二页及之后不起作用。

相关文章：