jQuery 数据表：导出 Excel 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7684099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatable : Export Excel button
提问by Kris-I
Is there a way to set the position of the Export, PDF button ? (on the rightr of the table, bottom right of the table, ....)
有没有办法设置导出、PDF 按钮的位置？（在桌子的右边，桌子的右下角，....）
http://www.datatables.net/release-datatables/extras/TableTools/
http://www.datatables.net/release-datatables/extras/TableTools/
回答by Jovan MSFT
If you want to move entire table tools toolbar move T letter in the initialization. Example that pushes entire toolbar at the end is:
如果要移动整个表格工具工具栏，请在初始化时移动 T 字母。最后推送整个工具栏的示例是：
$('#example').dataTable( {
"sDom": '<"clear">lfrtipT'
} );
You cannot reconfigure DataTables to move only pdf button, but you can use standard JQuery to take button with class "DTTT_button_pdf" to some new position. Probably something like:
您不能重新配置 DataTables 以仅移动 pdf 按钮，但您可以使用标准 JQuery 将具有“DTTT_button_pdf”类的按钮带到某个新位置。大概是这样的：
var pdfButton = $(".DTTT_button_pdf").detach();
$("#newPosition").append( pdfButton );
In this example, newPosition is an id of the element where you an to place pdf button.
在此示例中， newPosition 是您要放置 pdf 按钮的元素的 id。
回答by user3789888
var oTable = $("#tblViewMetadata").dataTable({
"oLanguage": { "sSearch": "Search All Columns:" },
"bJQueryUI": true,
"bDestroy": true,
"bPaginate": true,
"bLengthChange": true ,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"bDeferRender": true,
"bRetrieve": true,
"sScrollX": "500px",
"sPaginationType": "full_numbers",
"sDom": '<"H"lTfr>t<"F"ip>',
"aLengthMenu": [[ 10, 25, 50,100, -1], [10, 25, 50,100, "All"]],
"iDisplayLength": 10,
,
"bSearchable": true,
"oTableTools": {
"sSwfPath": "../Content/swf/copy_csv_xls.swf",
"aButtons": [
{
"sExtends": "xls",
"mColumns": [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
"sPdfOrientation": "landscape",
"sButtonText": "Export to Excel",
"oSelectorOpts": { filter: 'applied', order: 'current',page:'current' },
}
]
}, "bProcessing": true,
"bDestroy": true,
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0, 1]
}],
});
<link href="~/Content/themes/base/demo_page.css" rel="stylesheet" />
<link href="~/Content/themes/base/demo_table_jui.css" rel="stylesheet" />
<link href="~/Content/themes/base/TableTools.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/js/jquery-1.8.2.js"></script>
<script src="~/Scripts/js/jquery.ui.core.js"></script>
<script src="~/Scripts/js/jquery.ui.widget.js"></script>
<script src="~/Scripts/js/jquery.ui.datepicker.js"></script>
<script src="~/Scripts/js/jquery.dataTables.js"></script>
<script src="~/Scripts/js/jquery.ui.dialog.js"></script>
<script src="~/Scripts/js/dataTables.tableTools.min.js"></script>
<script src="~/Scripts/js/ZeroClipboard.js"></script>
<script src="~/Scripts/js/TableTools.js"></script>
var allButton = $(" div.DTTT_container ").detach();
$("#ExportBtn").append(allButton);
