Jquery 工具提示在datatable上不起作用_Jquery_Datatables_Jquery Ui Tooltip

Jquery 工具提示在datatable上不起作用

jquery datatables

Jquery 工具提示在datatable上不起作用,jquery,datatables,jquery-ui-tooltip,Jquery,Datatables,Jquery Ui Tooltip,谢谢你调查我的麻烦 $( document ).ajaxComplete(function() { // Required for Bootstrap tooltips in DataTables $('[data-toggle="tooltip"]').tooltip({ "html": true, "delay": {"show": 1000, "hide": 0}

谢谢你调查我的麻烦

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

我已经研究了很多关于这个主题的相关话题，尝试了很多解决方案，但仍然没有解决我的问题

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

我有一个生成的DataTable，我想在单元格上显示一些自定义工具提示。为了使其简短，让我们假设我只希望

斜体显示在tr
标记上
        $( document ).ajaxComplete(function() {
            // Required for Bootstrap tooltips in DataTables
            $('[data-toggle="tooltip"]').tooltip({
                "html": true,
                "delay": {"show": 1000, "hide": 0},
            });
        });

这就是我在经历了许多变化后所拥有的：
<!-- 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>

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


$（文档）.ready（函数（）{
/*初始化数据表*/
$（'#示例'）。数据表({
“分页”：正确，
“长度变化”：没错，
“搜索”：没错，
“排序”：正确，
“信息”：正确，
“自动宽度”：正确，
“处理”：对，
“服务器端”：正确，
“ajax”：{
“url”：“{path（'tableUserAjax'）}}”，
“类型”：“职位”，
“数据类型”：“json”，
},
“栏目”：[
{“数据”：“登录”}，
{“数据”：“名称”}，
{“数据”：“日期”}，
{“数据”：“语言”}，
{“数据”：“组”}，
{“数据”：“角色”}，
{“数据”：“有效”}]，
“fnDrawCallback”：函数（oSettings）{
$（'#示例tbody tr'）。每个（函数（）{
变幅针迹；
var nTds=$（'td'，此）；
var s0=$（nTds[0]）.text（）；
缝线=“+s0+”；
this.setAttribute（'rel'，'tooltip'）；
此.setAttribute（'title'，缝合线）；
});
}
});
/*应用工具提示*/
$（“#示例”）。工具提示({
是的，
/*我试过：内容：“粗体，斜体”*/
});
});

这是我的HTML表（使用一个ligne保持简单）：
        $( document ).ajaxComplete(function() {
            // Required for Bootstrap tooltips in DataTables
            $('[data-toggle="tooltip"]').tooltip({
                "html": true,
                "delay": {"show": 1000, "hide": 0},
            });
        });


登录
名称
日期
语言
团体
角色
有效的
亚伦
亚伦·马丁
2016年4月30日
英语
营销
0

这不应该起作用吗？
您可以使用以下方法：
table.cells().every( function () {

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

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

table.cells（）.every（函数（）{
$（this.node（））。工具提示({
是的，
内容：“粗体，斜体”，
});
});

其中table=$（'#示例'）.DataTable（..）
 如果要将HTML添加到特定单元格中，可以使用列中的函数
定义：
"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"}],

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

“列”：[
{“数据”：“登录”}，
{“数据”：“名称”，
“渲染”：函数（数据、类型、完整）{
如果（类型=='display'）{
返回“”+数据+“”
}
返回数据；
}
},
{“数据”：“日期”}，
{“数据”：“语言”}，
{“数据”：“组”}，
{“数据”：“角色”}，
{“数据”：“有效”}]，

在本例中，与“name”对应的数据将以斜体显示。如果希望有工具提示，只需将
标记替换为标记即可。
请务必查看文档以了解更多信息
        $( document ).ajaxComplete(function() {
            // Required for Bootstrap tooltips in DataTables
            $('[data-toggle="tooltip"]').tooltip({
                "html": true,
                "delay": {"show": 1000, "hide": 0},
            });
        });

如果希望每个单元格中都有工具提示，请将drawCallback
替换为[rowCallback
][2]<每次（重新）绘制表时（过滤、排序、初始化等时），都会调用code>drawCallback

。当datatables生成一行时，会调用RowCallback。

因此，根据这个命题，我发现问题来自ajax DataTable（它重新加载html并使其松散），声明的每个相关函数，包括工具提示函数

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

我的最终解决方案是在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>

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


$（文档）.ready（函数（）{
/*初始化数据表*/
$（'#示例'）。数据表({
“分页”：正确，
“长度变化”：没错，
“搜索”：没错，
“排序”：正确，
“信息”：正确，
“自动宽度”：正确，
“处理”：对，
“服务器端”：正确，
“ajax”：{
“url”：“{path（'tableUserAjax'）}}”，
“类型”：“职位”，
“数据类型”：“json”，
},
“栏目”：[
{“数据”：“登录”}，
{“数据”：“名称”}，
{“数据”：“日期”}，
{“数据”：“语言”}，
{“数据”：“组”}，
{“数据”：“角色”}，
{“数据”：“有效”}]，
“fnDrawCallback”：函数（oSettings）{
$（'#示例tbody tr'）。每个（函数（）{
变幅针迹；
var nTds=$（'td'，此）；
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（）；
缝线=“+s0+”；
this.setAttribute（'rel'，'tooltip'）；
此.setAttribute（'title'，缝合线）；
console.log（this）；
log（$（this））；
$（此）。工具提示({
html：对
});
});
}
});
});

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

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

我试过了。问题似乎来自于ajax重新生成的html，它失去了所有相关的函数。解决方案是在fnDrawCallback参数中添加工具提示。如果我这样做，你的解决方案会起作用：）我想它会