Export buttons dropdown is blank

[RyanPriceDotCa]

Summary of problem or feature request

Trying to utilize the export options. Export button shows up, however when clicked none of the excel/csv/pdf options are there. Below is a screen shot of what I see when I click the "Export" button

Code snippet of problem

in MyDatatable.php:

public function html()
    {
        return $this->builder()
            ->setTableId('people-table')
            ->stateSave(true)
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->dom('Bfrtip')
            ->orderBy(1)
            ->buttons(
                Button::make('create'),
                Button::make('colvis'),
                Button::make('print'),
                Button::make('export'), 
                Button::make('reset'),
                Button::make('reload')->text('<i class="fa fa-sync"></i> Reload'),
            )->parameters([
                'initComplete' => "function () {
                    this.api().columns().every(function () {
                        var column = this;
                        var input = document.createElement(\"input\");
                        $(input).appendTo($(column.footer()).empty())
                        .on('change', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
                    });
                }",
            ]);
    }

From composer.json:

    "require": {
        "php": "^7.2",
        "barryvdh/laravel-snappy": "^0.4.6",
        "fideloper/proxy": "^4.0",
        "guzzlehttp/guzzle": "^6.5",
        "laravel/framework": "^6.2",
        "laravel/tinker": "^2.0",
        "laravelcollective/html": "^6.0",
        "maatwebsite/excel": "^3.1",
        "yajra/laravel-datatables": "^1.5",
        "yajra/laravel-datatables-oracle": "~9.0"
    },

From config/datatables-buttons.php:

<?php

return [
    /*
     * Namespaces used by the generator.
     */
    'namespace'     => [
        /*
         * Base namespace/directory to create the new file.
         * This is appended on default Laravel namespace.
         * Usage: php artisan datatables:make User
         * Output: App\DataTables\UserDataTable
         * With Model: App\User (default model)
         * Export filename: users_timestamp
         */
        'base'  => 'DataTables',

        /*
         * Base namespace/directory where your model's are located.
         * This is appended on default Laravel namespace.
         * Usage: php artisan datatables:make Post --model
         * Output: App\DataTables\PostDataTable
         * With Model: App\Post
         * Export filename: posts_timestamp
         */
        'model' => '',
    ],

    /*
     * Set Custom stub folder
     */
    //'stub' => '/resources/custom_stub',

    /*
     * PDF generator to be used when converting the table to pdf.
     * Available generators: excel, snappy
     * Snappy package: barryvdh/laravel-snappy
     * Excel package: maatwebsite/excel
     */
    'pdf_generator' => 'snappy',

    /*
     * Snappy PDF options.
     */
    'snappy'        => [
        'options'     => [
            'no-outline'    => true,
            'margin-left'   => '0',
            'margin-right'  => '0',
            'margin-top'    => '10mm',
            'margin-bottom' => '10mm',
        ],
        'orientation' => 'landscape',
    ],

    /*
     * Default html builder parameters.
     */
    'parameters'    => [
        'dom'     => 'Bfrtip',
        'order'   => [[0, 'desc']],
        'buttons' => [
            'create',
            'export',
            'print',
            'reset',
            'reload',
        ],
    ],

    /*
     * Generator command default options value.
     */
    'generator'     => [
        /*
         * Default columns to generate when not set.
         */
        'columns' => 'id,add your columns,created_at,updated_at',

        /*
         * Default buttons to generate when not set.
         */
        'buttons' => 'create,export,print,reset,reload',

        /*
         * Default DOM to generate when not set.
         */
        'dom' => 'Bfrtip',
    ],
];

from config/snappy.php:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Snappy PDF / Image Configuration
    |--------------------------------------------------------------------------
    |
    | This option contains settings for PDF generation.
    |
    | Enabled:
    |
    |    Whether to load PDF / Image generation.
    |
    | Binary:
    |
    |    The file path of the wkhtmltopdf / wkhtmltoimage executable.
    |
    | Timout:
    |
    |    The amount of time to wait (in seconds) before PDF / Image generation is stopped.
    |    Setting this to false disables the timeout (unlimited processing time).
    |
    | Options:
    |
    |    The wkhtmltopdf command options. These are passed directly to wkhtmltopdf.
    |    See https://wkhtmltopdf.org/usage/wkhtmltopdf.txt for all options.
    |
    | Env:
    |
    |    The environment variables to set while running the wkhtmltopdf process.
    |
    */

    'pdf' => [
        'enabled' => true,
        'binary' => base_path('vendor/h4cc/wkhtmltopdf-amd64/bin/wkhtmltopdf-amd64'),
        'timeout' => false,
        'options' => [],
        'env'     => [],
    ],

    'image' => [
        'enabled' => true,
        'binary'  => '/usr/local/bin/wkhtmltoimage',
        'timeout' => false,
        'options' => [],
        'env'     => [],
    ],

];

No error is generated in the console or in the laravel log.

[yajra]

Were you able to include the buttons.server-side.js script on you layout file or assets?

[RyanPriceDotCa]

Yes,

The script section of that page ends up looking like this:

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>
    <script src="http://directoryrecords.localhost:8080/js/scripts.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
    <script src="http://directoryrecords.localhost:8080/vendor/datatables/buttons.server-side.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.js"></script>
<script type="text/javascript">(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["people-table"]=$("#people-table").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"","type":"GET","data":function(data) {
            for (var i = 0, len = data.columns.length; i < len; i++) {
                if (!data.columns[i].search.value) delete data.columns[i].search;
                if (data.columns[i].searchable === true) delete data.columns[i].searchable;
                if (data.columns[i].orderable === true) delete data.columns[i].orderable;
                if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
            }
            delete data.search.regex;}},"columns":[{"data":"action","name":"action","title":"Action","orderable":false,"searchable":false,"width":60,"className":"text-center"},{"data":"username","name":"username","title":"Username","orderable":true,"searchable":true},{"data":"surname","name":"surname","title":"Surname","orderable":true,"searchable":true},{"data":"designation","name":"designation","title":"Designation","orderable":true,"searchable":true,"visible":false},{"data":"given_name","name":"given_name","title":"Given Name","orderable":true,"searchable":true},{"data":"job_title","name":"job_title","title":"Job Title","orderable":true,"searchable":true},{"data":"department.name","name":"department.name","title":"Department","orderable":true,"searchable":true},{"data":"supervisor.person.full_name","name":"supervisor.person.full_name","title":"Supervisor","orderable":true,"searchable":true},{"data":"comments","name":"comments","title":"Comments","orderable":true,"searchable":true,"visible":false},{"data":"campus.name","name":"campus.name","title":"Campus","orderable":true,"searchable":true,"visible":false},{"data":"building.name","name":"building.name","title":"Building","orderable":true,"searchable":true,"visible":false},{"data":"room_number","name":"room_number","title":"Room Number","orderable":true,"searchable":true,"visible":false},{"data":"room_number_published","name":"room_number_published","title":"Room Number Published","orderable":true,"searchable":true,"visible":false},{"data":"fax_number","name":"fax_number","title":"Fax Number","orderable":true,"searchable":true,"visible":false},{"data":"cell_number","name":"cell_number","title":"Cell Number","orderable":true,"searchable":true,"visible":false},{"data":"home_number","name":"home_number","title":"Home Number","orderable":true,"searchable":true,"visible":false},{"data":"cost_centre","name":"cost_centre","title":"Cost Centre","orderable":true,"searchable":true,"visible":false},{"data":"bill_to_name","name":"bill_to_name","title":"Bill To Name","orderable":true,"searchable":true,"visible":false},{"data":"authorization_code","name":"authorization_code","title":"Authorization Code","orderable":true,"searchable":true,"visible":false},{"data":"nuance_name","name":"nuance_name","title":"Nuance Name","orderable":true,"searchable":true,"visible":false},{"data":"beep_extension","name":"beep_extension","title":"Beep Extension","orderable":true,"searchable":true,"visible":false},{"data":"publish_beep_extension","name":"publish_beep_extension","title":"Publish Beep Extension","orderable":true,"searchable":true,"visible":false},{"data":"webex","name":"webex","title":"Webex","orderable":true,"searchable":true,"visible":false},{"data":"extensions.extension","name":"extensions.extension","title":"Extension(s)","orderable":true,"searchable":true}],"stateSave":true,"dom":"Bfrtip","order":[[1,"desc"]],"buttons":[{"extend":"create"},{"extend":"colvis"},{"extend":"print"},{"extend":"reset"},{"extend":"reload","text":"<i class=\"fa fa-sync\"><\/i> Reload"}],"initComplete":function () {
                    this.api().columns().every(function () {
                        var column = this;
                        var input = document.createElement("input");
                        $(input).appendTo($(column.footer()).empty())
                        .on('change', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
                    });
                }});})(window,jQuery);
</script>

[yajra]

Not sure but maybe the export button gets overwritten somewhere. Do you have a custom button that may have caused this? Also try putting the script as the last one.

<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.js"></script>
<script src="http://directoryrecords.localhost:8080/vendor/datatables/buttons.server-side.js"</script>

[RayhanYulanda]

I've tried change my local script to the scripts that you give, but I'm still get blank export @yajra

[yajra]

Try using the excel button directly first. Export is just a collection of buttons.

Button::make('excel'), 

[mmansf1234]

Hi,

Did you ever find the solution? I have the same issue with both the Export dropdown and the Column Visibility dropdown.

[yajra]

@mmansf1234 If I recall correctly, this is related to a js/css error on the dataTables library and is fixed using the latest versions. Try updating your js + css files to latest and check again.

[mmansf1234]

Thanks, That was it. I used the DataTables download builder and put those in the projects and now everything works perfectly.

[TAB276]

Hello, I'm having the exact same error even with the latest scripts from datatables. I got those from the download manager but even copying the scripts from the CDN has the same problem. Any idea on how i could trubleshoot this? I have no other buttons in the page besides the datatable's ones and the only difference in my DataTable builder is that i defined my buttons in the parameters() method like this: ->parameters([ 'dom' => 'lBfrtip', 'buttons' => ['create', 'export', 'print', 'reset', 'reload'], ... ); Though i don't think it makes any difference as even by using the buttons() method to define the 'export' button has the same behaviour. Edit: typo.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.