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

Posted 2021-04-24

在自定义wordpress插件中，我试图为使用jQuery datatable（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）下​​拉列表

请参阅下面的参考图片：

答案

用脚本替换此脚本

    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'
        ]

    });
});