引导工具提示无法在与数据表的第一个页面不同的页面中工作 [英] Bootstrap tooltips don't work in page different from the first of datatables

问题描述

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

I'm developing several datatables where the cells of some columns have bootstrap tooltips. So i'm using:

• 引导框架
• 数据表.

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

The Datatables is organized in several pages. When the document is ready and the table is loaded, in the first page of the datatables the tooltips are working fine, but the cells of the nexts pages have no tooltips!

我该如何解决这个问题?

How can I solve this problem?

推荐答案

解决方案

每次DataTables重绘表时，都需要使用 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数据表:自定义控件在第二页及其后的页面上无效，以获取更多示例和详细信息.

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.

这篇关于引导工具提示无法在与数据表的第一个页面不同的页面中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！