工具提示不适用于数据表

Question

感谢您调查我的问题。

我看了很多关于这个主题的相关主题，尝试了很多解决方案，但仍然没有解决我的问题。

我有一个生成的数据表，我想在单元格上显示一些自定义工具提示。为了使其简短，假设我只想 <i>italics</i> 显示在 tr 标记上。

这是我经过多次更改后实际拥有的：

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="/miscellaneous/adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/miscellaneous/adminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/miscellaneous/adminLTE/dist/js/app.min.js"></script>    
<!-- Data Tables -->
<script src="/miscellaneous/bov2/js/jquery.dataTables.min.js"></script>
<script src="/miscellaneous/bov2/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/miscellaneous/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/miscellaneous/adminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/miscellaneous/adminLTE/dist/js/demo.js"></script>
<!-- page script -->
<script>
    $(document).ready(function () {

        /* Init DataTables */
        $('#example').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ path('tableUserAjax') }}",
                "type": "POST",
                "dataType": "json",
            },
            "columns": [
                {"data": "login"},
                {"data": "name"},
                {"data": "date"},
                {"data": "language"},
                {"data": "group"},
                {"data": "role"},
                {"data": "valid"}],
            "fnDrawCallback": function (oSettings) {
                $('#example tbody tr').each(function () {
                    var sTitle;
                    var nTds = $('td', this);
                    var s0 = $(nTds[0]).text();
                        sTitle = "<h1>" + s0 + "</h1>";
                        this.setAttribute('rel', 'tooltip');
                    this.setAttribute('title', sTitle);
                });
            }
        });
        /* Apply the tooltips */
        $('#example').tooltip({
            html : true,
            /* i tried this : content: "<b>Bold</b>, <i>Italic</i>",*/
        });
    });
</script>

这是我的 HTML table（为简单起见，使用一条线）：

<table class="table table-bordered table-hover dataTable no-footer" id="example" role="grid" style="width: 1163px;" data-original-title="" title="">
    <thead>
        <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 96.2px;"
            aria-sort="ascending" aria-label="Login: activate to sort column descending">Login
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 176.2px;"
            aria-label="Name: activate to sort column ascending">Name
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 201.2px;"
            aria-label="Date: activate to sort column ascending">Date
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 145.2px;"
            aria-label="Language: activate to sort column ascending">Language
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 102.2px;"
            aria-label="Group: activate to sort column ascending">Group
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 83.2px;"
            aria-label="Role: activate to sort column ascending">Role
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 88px;"
                aria-label="Valid: activate to sort column ascending">Valid
            </th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd" rel="tooltip" title="&lt;h1&gt;Aaron&lt;/h1&gt;">
            <td class="sorting_1">Aaron</td>
            <td>Aaron MARTIN</td>
            <td>30 mars 2016</td>
            <td>English</td>
            <td>Marketing</td>
            <td></td>
            <td>0</td>
        </tr>
    </tbody>
</table>

这行不通吗？

Answer 1

你可以使用这个：

table.cells().every( function () {

        $(this.node()).tooltip({
                 html : true,
                 content: "<b>Bold</b>, <i>Italic</i>",
             });
});

其中 table = $('#example').DataTable(....);

Answer 2

如果您想要将 HTML 添加到特定单元格，您可以使用 columns 定义中的 render 函数：

"columns": [
            {"data": "login"},
            {"data": "name",
                "render": function(data,type,full){
                      if(type==='display'){
                           return '<i>'+data+'</i>'
                      }
                      return data;
                 }
            },
            {"data": "date"},
            {"data": "language"},
            {"data": "group"},
            {"data": "role"},
            {"data": "valid"}],

在此示例中，对应于 "name" 的数据将以斜体显示。如果您希望获得工具提示，只需将 <i> 标签替换为 <span title='tooltip'> 标签即可。请务必查看 render 文档以获取更多信息！

如果您想要的是 每个单元格 中的工具提示，请将 drawCallback 替换为 [rowCallback][2]。每次 table 被（重新）绘制（过滤、排序、初始化等）时，都会调用 drawCallback。当 datatables 生成一行时调用 RowCallback。

Answer 3

所以，根据命题，我发现问题来自 ajax DataTable（重新加载 html 并使其松散声明的每个关联函数，包括工具提示。

我最终的解决方案是在 fnDrawCallback 参数中添加工具提示。见下文：

<script>

    $(document).ready(function () {

        /* Init DataTables */
        $('#example').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ path('tableUserAjax') }}",
                "type": "POST",
                "dataType": "json",
            },
            "columns": [
                {"data": "login"},
                {"data": "name"},
                {"data": "date"},
                {"data": "language"},
                {"data": "group"},
                {"data": "role"},
                {"data": "valid"}],
            "fnDrawCallback": function (oSettings) {
                $('#example tbody tr').each(function () {
                    var sTitle;
                    var nTds = $('td', this);
                    var s0 = $(nTds[0]).text();
                    var s1 = $(nTds[1]).text();
                    var s2 = $(nTds[2]).text();
                    var s3 = $(nTds[3]).text();
                    var s4 = $(nTds[4]).text();
                    var s5 = $(nTds[5]).text();

                    sTitle = "<h1>"+s0+"</h1>";

                    this.setAttribute('rel', 'tooltip');
                    this.setAttribute('title', sTitle);
                    console.log(this);
                    console.log($(this));
                    $(this).tooltip({
                        html: true
                    });
                });
            }
        });

    });

</script>

Answer 4

这将为所有数据表全局设置它

        $( document ).ajaxComplete(function() {
            // Required for Bootstrap tooltips in DataTables
            $('[data-toggle="tooltip"]').tooltip({
                "html": true,
                "delay": {"show": 1000, "hide": 0},
            });
        });

Answer 5

在"fnDrawCallback": function()

中使用$('[data-toggle="tooltip"]').tooltip();

<script>
    $(document).ready(function() {

        var selected = [];
        $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": "data.php",
            info:true,
            "fnDrawCallback": function() {
                jQuery('.toggle-demo').bootstrapToggle();
                $('[data-toggle="tooltip"]').tooltip();

            },
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                $(nRow).attr('id','row_'+ aData[4]);
            },

            aLengthMenu: [ 10,25, 50, 100,-1], 
        } );
    } );



</script>

工具提示不适用于数据表

Tooltip is not working on datatable

jquery

datatables

jquery-ui-tooltip