使用 jQuery DataTable Buttons Plugin 不显示导出按钮

Posted 2023-05-07

【中文标题】使用 jQuery DataTable Buttons Plugin 不显示导出按钮

【英文标题】：Export button not displaying using jQuery DataTable Buttons Plugin

【发布时间】：2019-09-06 11:08:08

【问题描述】：

在自定义 wordpress 插件中，我正在尝试为使用 jQuery 数据表 (https://datatables.net) 显示的表格添加导出功能。从 jQuery 数据表按钮扩展 (https://datatables.net/extensions/buttons/) 按钮导出按钮未显示

请问有人可以帮我解决这个问题吗？

排队脚本

add_action( 'wp_enqueue_scripts', 'add_datatable_script' );
function add_datatable_script() 

        wp_register_script('datatables', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js', array('jquery'), true);
        wp_enqueue_script('datatables');
        wp_register_script('datatables_bootstrap', 'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js', array('jquery'), true);
        wp_enqueue_script('datatables_bootstrap');
        wp_enqueue_script('datatable-buttons', 'https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js', array('jquery'), true);
        wp_enqueue_script('datatable-flash', 'https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js', array('jquery'), true);
        wp_enqueue_script('datatable-html5', 'https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js', array('jquery'), true);
        wp_enqueue_script('datatable-print', 'https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js', array('jquery'), true);
        wp_enqueue_script('datatable-jszip', 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js', array('jquery'), true);
        wp_enqueue_script('datatable-pdfmake', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js', array('jquery'), true);
        wp_enqueue_script('datatable-vfonts', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js', array('jquery'), true);


    

排队样式

add_action( 'wp_enqueue_scripts','add_datatable_style' );
/**
     * Register Datatable Style
     */
    function add_datatable_style() 
        wp_register_style('bootstrap_style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
        wp_enqueue_style('bootstrap_style');

        wp_register_style('datatables_style', 'https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css');
        wp_enqueue_style('datatables_style');

        wp_register_style('datatables_button_style', 'https://cdn.datatables.net/buttons/1.5.0/css/buttons.dataTables.min.css');
        wp_enqueue_style('datatables_button_style');
    

排队 datatable_scripts

public function ean_datatable_scripts() 
        wp_enqueue_script( 'ean_datatables', plugin_dir_url( __FILE__ ) . 'js/bdsc-prod.js', array( 'jquery' ), filemtime( plugin_dir_url( __FILE__ ) . 'js/bdsc-prod.js'), false );
        wp_localize_script( 'ean_datatables', 'bdsc', array('ajaxurl' => admin_url( 'admin-ajax.php')));
    

add_shortcode('bdsc_product_data', 'get_product_data');
function get_product_data()
                self::ean_datatable_scripts();

        ob_start();
?>
<table id="myTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table> 
<?php
return ob_get_clean();

JS 代码

$(document).ready(function() 
    var table1 = $('#myTable').DataTable(
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]

    );
);

当我包含 Bfrtip 属性时，在前端甚至不显示 Show (10,25,50,All) 下拉菜单

请看下面的参考图：

【问题讨论】：

控制台出现什么错误？

【参考方案1】：

用你的脚本替换这个脚本

    jQuery(document).ready(function() 
    var table1 = jQuery('#myTable').DataTable(     
        "iDisplayLength": 4,
        "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print','pageLength'
        ]

    );
);

【讨论】：

谢谢，您的解决方案确实有效。但是添加按钮时不显示显示过滤器。请问您能提出解决办法吗？

显示过滤器的意思？

我的意思是“显示10,25,50，所有条目过滤器在这里。我还在问题描述部分添加了参考图像。

固定不固定？

还没有修复，Vel