分页后qtip2工具提示不起作用(Jquery Datatables)

时间:2014-08-25 08:49:37

标签: jquery datatables qtip2

初始化dataTables:

$('#example').dataTable({ data: data, columns: columns });

初始化dataTables后设置工具提示:

$(".showInfo").qtip({                   
                    content: {text: function(event, api) {                            
                                $.get( "url", function(result) {                                                                   
                                    var content = 'Name :' + result.Name + '</br>';
                                        content += 'Phone :' + result.Phone+ '</br>';
                                        content += 'Phone :' + result.Email+ '</br>';                                        
                                    api.set('content.text', content);
                                }), function(xhr, status, error) {
                                    api.set('content.text', status + ': ' + error);
                                };
                                return 'Loading...' 
                                }
                            }
                });

上面的代码适用于dataTable的第一页。但是,当我对&#34; qtip&#34;进行分页时。功能不起作用。请帮帮我。

1 个答案:

答案 0 :(得分:2)

我明白了:)

$('#example').on('mouseenter', '.showInfo', function(event) {

                            $.get("URL", function(result) {
                                $(this).qtip({
                                    overwrite: false,
                                    content: function() {

                                        var content = 'Name :' + result.Name + '</br>';
                                        content += 'Phone :' + result.Phone + '</br>';
                                        content += 'Phone :' + result.Email + '</br>';
                                        return content;
                                    },
                                    show: {
                                        event: event.type,
                                        ready: true
                                    },
                                    hide: {
                                        fixed: true
                                    }
                                }, event); 
                            }, 'json');
                        });