工具提示不适用于数据表

感谢您调查我的麻烦。

我已经查看了许多有关此主题的相关主题，尝试了许多解决方案，但仍然没有解决我的问题。

我有一个生成的数据表，我希望一些自定义工具提示显示在单元格上。为了使它简短而简单，让我们假设我只想<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 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>

这不应该行吗？

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

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

因此，基于命题，我发现问题来自 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>

如果要将

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]。每次（重新）绘制表时（过滤、排序、初始化等）都会调用drawCallback。当数据表生成行时调用 RowCallback。

你可以使用这个：

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

其中表 = $（'#example'）。数据表（....）;

在

"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>

相关内容

最新更新

热门标签：