jQuery datatables in qtip2 popup

问题

I would like to insert the jQuery datatables table in a qtip2 popup. I did this test: http://jsfiddle.net/fDavN/5588/

But the search and pagination are not shown.

$(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!');
                } 
****


});

Ideas?

Thanks!

回答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) );
},

来源：https://stackoverflow.com/questions/15267790/jquery-datatables-in-qtip2-popup