Laravel-datatables: How to add Custom Button with action with Yajra Buttons Plugin

[123bistami]

Hi guys,

I will add Custom Button like pre defined Print, Excel Button with Custom Action, I implement service like in the documentation of use the Button Plugin, But its not work.

get every time js error "Uncaught Unknown button type: test"

my Service implementation:

class UsersQueryBuilderDataTable extends DataTable
{

protected $actions = ['print', 'csv', 'excel', 'pdf', 'test'];

/**
 * Build DataTable class.
 *
 * @return \Yajra\Datatables\Engines\BaseEngine
 */
public function dataTable()
{
    return $this->datatables
        ->queryBuilder($this->query())
        ->addColumn('action', 'eloquent.tables.users-action');
}

/**
 * Get the query object to be processed by dataTables.
 *
 * @return \Illuminate\Database\Eloquent\Builder|\Illuminate\Database\Query\Builder|\Illuminate\Support\Collection
 */
public function query()
{
    $query = DB::table('users');

    return $this->applyScopes($query);
}

/**
 * Optional method if you want to use html builder.
 *
 * @return \Yajra\Datatables\Html\Builder
 */
public function html()
{
    return $this->builder()
                ->columns($this->getColumns())
                ->ajax('')
                ->addAction(['width' => '80px'])
                ->parameters([
                    'dom'          => 'iBftlp',
                    'buttons'      => ['print', 'excel','pdf', 'test' ]
                ]);
}

public function test(){
    return 'test';
}

/**
 * Get columns.
 *
 * @return array
 */
protected function getColumns()
{
    return [
        'id',
        'name',
        'email',
        'created_at',
        'updated_at',
    ];
}

/**
 * Get filename for export.
 *
 * @return string
 */
protected function filename()
{
    return 'users_' . time();
}

}

[123bistami]

I think this error occurs becouse the pdf excel buttons are pre defined by datatables.js how can i extend this i use the scripts() method of htmlbuilder.

[Waguilar33]

I´m also trying to figure out how to implement this feature but haven't been able to. Any help will be greatly appreciated.

[yajra]

Sorry for late response. You need to add an action=test on your query params or the request payload on your buttons script for it to be triggered.

[Trexology]

Had the same problem,
trigging the action can be done via query params BUT the error "Unknown button type test" is not loading the datatables at all

[Trexology]

I figured out the missing part:
for the "custom action" UI to render we need to added a new DataTable.ext.buttons.test published at /public/vendor/datatables/buttons.server-side.js

For my case I'm doing a deleteSelected custom button, my code are as followed:

` DataTable.ext.buttons.deleteSelected = {
className: 'buttons-delete',

    text: function (dt) {
        return '<i class="fa fa-minus"></i> ' + dt.i18n('buttons.deleteSelected', 'Delete');
    },

    action: function (e, dt, button, config) {
        window.location = window.location.href.replace(/\/+$/, "") + '?action=deleteSelected';
    }
};`

Someone may want to include this part in the tutorial https://yajrabox.com/docs/laravel-datatables/master/buttons-custom.

This was not mentioned there

[shanitiwari01]

Some Additional Feature Here like addColumn and search a specific column

https://medium.com/@tiwarishani/how-to-install-yajra-on-laravel-with-a-specific-column-search-and-addcolumn-rowcolumn-b18270fafa07?sk=2ce1aeaebc7f188f1ef9e2748c427555

[HemanthThallam1993]

Sorry for late response. You need to add an action=test on your query params or the request payload on your buttons script for it to be triggered.

I have followed https://yajrabox.com/docs/laravel-datatables/master/buttons-custom but got Uncaught Unknown button type: customButton
Can we add
DataTable.ext.buttons.customButton = {
className: 'buttons-csv',

    text: function (dt) {
        return '<i class="fa fa-download"></i> ' + dt.i18n('buttons.test', 'My button');
    },

    action: function (e, dt, button, config) {
        var url = _buildUrl(dt, 'customButton');
        window.location = url;
    }
};

to /public/vendor/datatables/buttons.server-side.js to create custom button it is working for me actually
or is there any other suggestion