0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.