dataTable TableTools 复制按钮不起作用
dataTable TableTools Copy button not working
首先是我正在处理的开发站点。目前正在开发中,所以在您回答之前事情可能会发生变化: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 - 所以我取得了一些进展。我的应用程序首先要求您 select 商店类型和域。此时,我正在使用的 table 被隐藏在一个简单的内联 style="display: none"
中。在生成 url 的 jquery 之后显示 table 及其所有字段。如果我不在开始时隐藏我的 table,那么导出按钮都可以正常工作。然而,关于隐藏 table 的一些事情最初搞砸了。显然我不能一直隐藏我的 table 所以我仍在试图弄清楚为什么会这样。 This stack overflow 给出了一个评分较低的答案,为我指明了正确的方向。
所以正如我在更新 2 中所说的那样,问题是如果按钮被添加到 table 而它是隐藏的(我使用 bootstrap 但它发生是否使用隐藏 class或样式 none),当它显示时按钮不起作用。关于容器 class 的问题是 "fixing" 这个问题,这就是为什么点击后副本会起作用的原因。
我仍然不知道为什么会这样,但我就是这样解决的。我现在在显示 table 之后添加按钮,如下所示:
$('#grid-container').show(400);
$( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');
这意味着它们不会成为转换的牺牲品并且工作得很好。
首先是我正在处理的开发站点。目前正在开发中,所以在您回答之前事情可能会发生变化: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 - 所以我取得了一些进展。我的应用程序首先要求您 select 商店类型和域。此时,我正在使用的 table 被隐藏在一个简单的内联 style="display: none"
中。在生成 url 的 jquery 之后显示 table 及其所有字段。如果我不在开始时隐藏我的 table,那么导出按钮都可以正常工作。然而,关于隐藏 table 的一些事情最初搞砸了。显然我不能一直隐藏我的 table 所以我仍在试图弄清楚为什么会这样。 This stack overflow 给出了一个评分较低的答案,为我指明了正确的方向。
所以正如我在更新 2 中所说的那样,问题是如果按钮被添加到 table 而它是隐藏的(我使用 bootstrap 但它发生是否使用隐藏 class或样式 none),当它显示时按钮不起作用。关于容器 class 的问题是 "fixing" 这个问题,这就是为什么点击后副本会起作用的原因。
我仍然不知道为什么会这样,但我就是这样解决的。我现在在显示 table 之后添加按钮,如下所示:
$('#grid-container').show(400);
$( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');
这意味着它们不会成为转换的牺牲品并且工作得很好。