dataTable TableTools复制按钮不起作用

时间:2015-02-11 22:51:37

标签: javascript jquery datatables jquery-datatables-editor

首先是我正在开发的开发网站。目前正在开发中,因此在您回答之前可能会发生变化:http://wgarrisondev.mainstreethost.com/mage-product-redirects/public/

这是我的初始化代码:

// DataTable editor plugin initialization    
var editor = new $.fn.dataTable.Editor( {
    ajax: function ( method, url, data, successCallback, errorCallback ) {
        successCallback( {"id": 4} );
    },
    table: "#grid-basic",
    dom: 'Tlfrtip',
    fields: [ {
            label: "Request URL:",
            name: "request-url"
        }, {
            label: "Target URL:",
            name: "target-url"
        }, {
            label: "Category:",
            name: "category"
        }
    ]
});
// DataTable Initialization
var dataTable = $('#grid-basic').DataTable({                
    responsive: true,
    columns: [
        { data: "request-url" },
        { data: "target-url" },
        { data: "category" },
        { data: null, defaultContent: '<button type="button" class="btn btn-xs btn-danger icon-delete"><span class="glyphicon glyphicon-remove"></span></button>', orderable: false }
    ]
});

// TableTools DataTable plugin initialization
var tableTools = new $.fn.dataTable.TableTools(dataTable, {
    "sSwfPath": swfPath,
    "aButtons": [
        "copy",
        {
            "sExtends": "collection",
            "sButtonText": "Export",
            "aButtons": ["csv", "xls", "pdf"]
        }
    ]
});
$( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');

// Set up editing of fields
$('#grid-basic').on( 'click', 'tbody td:not(:last-child)', function () {
    editor.inline( this );
} );

// Set up Removal functionality
$('#grid-basic').on('click', 'button.icon-delete', function() {
    dataTable.row($(this).parents('tr')).remove().draw();
});   

我有一些非常奇怪的行为。复制按钮不起作用。但是,如果我选择其他三个选项中的一个然后点击复制它就可以了。所有其他选项都可以正常工作。

更新 -
我已经确定,任何收藏的按钮都不会有效,直到我至少点击过一次这个系列.....仍然无能为力

更新2 - 所以我取得了一些进展。我的应用程序首先要求您选择商店类型和域。此时,我使用的表格隐藏了一个简单的内联style="display: none"。在生成url的jquery之后,然后显示包含其所有字段的表。如果我不在开头隐藏我的桌子,那么导出按钮都可以正常工作。然而,最初隐藏桌子的事情搞砸了。显然,我不能在整个时间内隐藏我的桌子,所以我仍然想弄清楚为什么会这样。 This stack overflow的评分较低,使我指向正确的方向。

1 个答案:

答案 0 :(得分:0)

正如我在更新2中所说的那样,问题是如果按钮被添加到表中而它是隐藏的(即使用引导程序,但无论是使用隐藏类还是样式都没有),当显示按钮不需要时上班。关于容器类的一些东西正在“解决”这个问题,这就是为什么副本在点击之后可以工作的原因。

我仍然不知道为什么会这样,但这就是我修复它的方法。我现在添加按钮后我显示这样的表:

$('#grid-container').show(400); $( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');

这意味着他们不会成为过渡的受害者并且工作得很好。