【问题标题】:Datatable : Export Excel button数据表:导出 Excel 按钮
【发布时间】:2023-03-05 22:06:01
【问题描述】:

有没有办法设置导出、PDF 按钮的位置? (在表格的右边,表格的右下角,....)

http://www.datatables.net/release-datatables/extras/TableTools/

【问题讨论】:

  • 您只是想将“导出 PDF”按钮或整个按钮面板移动到表格的右下角吗?

标签: jquery jquery-ui jquery-datatables


【解决方案1】:

如果要移动整个表格工具工具栏在初始化时移动T字母。最后推送整个工具栏的示例是:

$('#example').dataTable( {
    "sDom": '<"clear">lfrtipT'
} );

您无法重新配置 DataTables 以仅移动 pdf 按钮,但您可以使用标准 JQuery 将具有“DTTT_button_pdf”类的按钮移至某个新位置。大概是这样的:

var pdfButton = $(".DTTT_button_pdf").detach();
$("#newPosition").append( pdfButton );

在本例中,newPosition 是您放置 pdf 按钮的元素的 id。

【讨论】:

    【解决方案2】:
                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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-10-30
      • 2020-12-10
      • 2018-06-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多