qtip2弹出窗口中的jQuery数据表

时间:2013-03-07 09:44:30

标签: jquery datatables qtip2

我想在qtip2弹出窗口中插入jQuery datatables表。 我做了这个测试: 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!');
                } 
****


});

想法?

谢谢!

1 个答案:

答案 0 :(得分:1)

我使用jquery数据表很多,我认为你的问题是你没有将元素<table class="table table-striped table-bordered dataTable" id="tbl1"></table>添加到你的页面中。我做了更改你的代码,但没有时间来测试它。你可以尝试一下。

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