Export button not displaying using jQuery DataTable Buttons Plugin

Question

In a custom wordpress plugin, I am trying to add an export feature for the table that is displayed using jQuery datatable(https://datatables.net). Export buttons from the jQuery datatable buttons extension(https://datatables.net/extensions/buttons/) buttons aren't getting displayed

Please, can someone help me with this?

Enqueuing Scripts

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);


    }

Enqueuing Styles

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');
    }

Enqueuing 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 Code

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

    });
});

When I include Bfrtip property, on front end even the Show (10,25,50,All) dropdown isn't displayed

Please see the reference image below:

what is the error in console?

Vel
– Vel

2019-04-16 14:52:34 +00:00
Commented Apr 16, 2019 at 14:52 — Vel
– Vel, Commented Apr 16, 2019 at 14:52

Vel · Accepted Answer · 2019-04-24 05:45:04Z

1

Replace this script with your script

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

    });
});

edited Apr 24, 2019 at 5:45

answered Apr 16, 2019 at 14:54

Vel

9,4286 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Himani Over a year ago

Thanks, your solution did work. But the Show filter isn't displayed when buttons are added. Please can you suggest a fix?

Vel Over a year ago

Show filter means?

Himani Over a year ago

I mean "Show 10,25,50, All Entries filter here. I have also added the reference image in the issue description section.

Vel Over a year ago

It is fixed or not?

Himani Over a year ago

It isn't fixed yet, Vel

|

Collectives™ on Stack Overflow

Export button not displaying using jQuery DataTable Buttons Plugin

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related