在dataTable中动态渲染 Popover 的悬浮框

一：在普通页面中的icon中使用Popover 的悬浮框

通常，我们会在一些icon 或者label上做一些悬浮显示的内容，最简单的方法就是加上title属性，这个就不多说了。但是当我们想显示悬浮框里面的文字，具备一些简单的样式的时候，或者是有换行、无需列表这种效果时，我们会用到的就是Popover 的悬浮框。
就比如这样的：

实现也很简单，直接看代码
HTML：

 <span type="button" id="test_popover" class="glyphicon glyphicon-plane" title="Popover title"
                                  data-container="body" data-toggle="popover" data-placement="bottom"
                                  data-content="底部的 Popover 中的一些内容"> </span>

JS：

$(function () {
       $("[data-toggle='popover']").popover();
});     

这个时候，我们会发现，popover的悬浮框的显示/隐藏，必须通过鼠标点击来操作，不会像html标签的title一样，具有hover的效果（鼠标悬浮在icon上就展示，移开就收起），此时对js做一些优化：

$(function() {
                    $("[data-toggle='popover']").each(function() {
                        var element = $(this);
                        element.popover().on("mouseenter", function() {
                            var _this = this;
                            $(this).popover("show");
                            $(this).siblings(".popover").on("mouseleave", function() {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function() {
                            var _this = this;
                            setTimeout(function() {
                                if(!$(".popover:hover").length) {
                                    $(_this).popover("hide")
                                }
                            }, 100);
                        });
                    });
                });  

这个时候，悬浮框就能根据鼠标悬浮显示/隐藏。

二：在dataTable中实现这个效果

使用过dataTable的同学都知道，通常使用dataTable的时候，会根据请求服务器的返回数据，动态的渲染表格中的数据；有时候，我们需要根据表格中的返回数据的不同，循环动态渲染悬浮框。

比如：在表格中，返还方式一栏中，当方式为邮寄时，需要悬浮显示邮寄的地址，且每一条数据的地址都可能不同；
首先，我们先对dataTable的columns数据重新渲染（render操作）：

columns:[
				{
						data: "repelType",
                        name: '返还方式',
                        render: function (data, type, row, meta) {
                            let repelTypeHtml = '代售';
                            if (row.repelType == 2) {
                                repelTypeHtml = '自提';
                            } else if (row.repelType == 3) {
                                repelTypeHtml = '快递<span id="address_' + row.id + '" class="glyphicon glyphicon-plane" title="邮寄地址:"  data-container="body" data-toggle="popover" data-placement="bottom" data-content="' + row.mailingAddress + '"> </span>';
                            }
                            return repelTypeHtml;
                        }
                },
]

这个时候呢，我们已经在icon渲染在表格中，但是却发现，悬浮框的效果无法展示。
通过反复的打印测试，我发现，之前在 JS中$("[data-toggle=‘popover’]").popover()的执行在表格数据渲染之前，也就是说，，当表格数据完成之后，是没有悬浮效果的。
所以，解决方案很明显，需要在dataTable数据加载完成之后，再执行("[data-toggle=‘popover’]").popover()。查询dataTable的文档，发现initComplete这样一个回调函数，它会在dataTable渲染完成之后调用，然后在initComplete回调函数，执行 $("[data-toggle=‘popover’]").popover()动作，就能实现功能！

columns:[],
initComplete:function (oSettings, json) {
                    $("[data-toggle='popover']").each(function() {
                        var element = $(this);
                        element.popover().on("mouseenter", function() {
                            var _this = this;
                            $(this).popover("show");
                            $(this).siblings(".popover").on("mouseleave", function() {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function() {
                            var _this = this;
                            setTimeout(function() {
                                if(!$(".popover:hover").length) {
                                    $(_this).popover("hide")
                                }
                            }, 100);
                        });
                    });             
                },

注：我之前试过rowCallback回调，但是也是不行的，这个回调是在row渲染时执行，不是渲染完成之后执行，所以在$("#span_id").popover()时，获取dom对象为空，依然无法实现想要的效果。如果有别的同学有好的优化方式，欢迎指正！