jquery - qtip2 弹出窗口中的 jQuery 数据表

Question

我想在 qtip2 弹出窗口中插入 jQuery 数据表表。我做了这个测试：http: //jsfiddle.net/fDavN/5588/

但是没有显示搜索和分页。

$(document).ready(function() {

    $('.btn-layer').each(function() {    
    $(this).qtip( {
        content: {
            text: 'Loading...',            
            title: {
                text: 'User',
                button: true
            },
            ajax: {
                url: '/echo/json/',
                type: 'GET',
                dataType: 'text',
                cache: false,                
                //dataType: 'json',
                //contentType: 'application/json; charset=utf-8',
                //dataType: 'json',
                //data: { id: c_id },
                success: function(data) {
                    //var data = eval('(' + data + ')');                                        
                    data = testJson;                    
                    var $tab = $('<table class="table table-striped table-bordered dataTable" id="tbl1"></table>');                                                               
                    $($tab).dataTable({                    
                        "aaData": data.aaData,
                        "aoColumns": data.aoColumns
                    });
                    this.set('content.text', $($tab) );
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('AJAX error!');
                } 
****


});

想法？

谢谢！

Answer 1

I use jquery datatables lot and I think you problem is that you didn't add the element <table class="table table-striped table-bordered dataTable" id="tbl1"></table> into your page. I did the change of your code but didn't get time to test it. you can have a try.

success: function(data) {
    //var data = eval('(' + data + ')');                                        
    data = testJson;                    

    $('<table class="table table-striped table-bordered dataTable" id="tbl1"></table>').appendTo('body').dataTable({                    
        "aaData": data.aaData,
        "aoColumns": data.aoColumns
    });
    this.set('content.text', $($tab) );
},