Laravel-datatables: Hide column in a Service Implementation

Created on 22 Nov 2017  路  5Comments  路  Source: yajra/laravel-datatables

Summary of problem or feature request

I need hide a column with a service implementation.

Code snippet of problem

/**
 * Build DataTable class.
 *
 * @param mixed $query Results from query() method.
 * @return \Yajra\DataTables\DataTableAbstract
 */
public function dataTable($query)
{
    return datatables($query);
}

/**
* Get query source of dataTable.
*
* @param \App\User $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(User $model)
{
    return $model->newQuery()->select($this->getColumns());
}

/**
 * Optional method if you want to use html builder.
 *
 * @return \Yajra\DataTables\Html\Builder
 */
public function html()
{
    return $this->builder()
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->addAction(['width' => '80px', 'title' => '', 'className' => 'text-center'])
                ->parameters($this->getBuilderParameters());
}

/**
 * Get columns.
 *
 * @return array
 */
protected function getColumns()
{
    return [
        'uuid' => [
            'name' => 'uuid',
            'data' => 'uuid',
            'title' => 'uuid',
            'visible' => false
        ],
        'created_at',
        'username',
        'email',
    ];
}

I obtain the following error:
image
If I comment the uuid column, all works as expected.

System details

  • Operating System: Windows 7 + XAMPP Version 7.0.9
  • PHP Version: 7.0.9
  • Laravel Version: 5.5.21
  • Laravel-Datatables Version: v8.1.1
  • Laravel-Datatables Buttons Version: v3.0.2
question

All 5 comments

This query select code is now invalid since your columns are now a mixed array.

public function query(User $model)
{
    return $model->newQuery()->select($this->getColumns());
}

Should be something like:

public function query(User $model)
{
    return $model->newQuery()->select('*');
}

All is working with your solution.

Thanks for your fast response!!

When using service implementation and setting visible to false on getColumns, it is not working on the ajax call of the service implementation.

When it first loads the page, the column is not visible, but once the ajax call completes, it becomes visible once again.

I am using Laravel 5.3, so I may need to update Laravel and the Datatables package to obtain this functionality, I was hoping to avoid that for now if possible.

class BlahDataTable extends DataTable
{

    /**
     * Display ajax response.
     *
     * @return \Illuminate\Http\JsonResponse
     */

    public function ajax()
    {
        return $this->datatables
            ->eloquent($this->query())
            ->editColumn('id', '<a href="{!! route(\'blarg.show\', [$id]) !!}">{{ $id }}</a>')
            ->make(true);
    }


    /**
     * Get the query object to be processed by datatables.
     *
     * @return \Illuminate\Database\Query\Builder|\Illuminate\Database\Eloquent\Builder
     */
    public function query()
    {
        $blargs= blarg::all();
        return $this->applyScopes($blargs);
    }


    /**
     * Optional method if you want to use html builder.
     *
     * @return \yajra\Datatables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
            ->columns($this->getColumns())
            ->parameters([
                'dom' => 'lBfrtip',
                'stateSave' => false,
                'bScrollInfinite' => true,
                'responsive' => true,
                'lengthMenu' => [10, 15, 30, 50, 100],
                'buttons' => ['copy', 'csv', 'excel', 'print', 'reset'],
                "language" => [
                    "lengthMenu"    => "Show _MENU_ blargs",
                    "info"          => "Showing _START_ to _END_ of _TOTAL_ blargs",
                    "infoEmpty"     => "Showing 0 blargs",
                    "infoFiltered"  => "(filtered from _MAX_ blargs)",
                    "processing"    => "<i class=\"fa fa-cog fa-spin fa-2x\"></i> Searching blargs"
                ],
                "aoColumnDefs" => [
                    [ "sClass" => "text-right", "aTargets" => [ 6 ]],
                    [ "sClass" => "text-center", "aTargets" => [ 1, 2, 4, 7 ]]
                ],
                'processing' => true,
                'serverSide' => true,
                'ajax' => [
                    'url' => route('index'),
                    'data' => 'function ( d ) {
                        return JSON.stringify( d );
                    }'
                ]
            ]);
    }


    /**
     * @return array
     */
    protected function getColumns()
    {
        return  [
            [
                "orderable" => false,
                "searchable" => false,
                "title" => "ID",
                "data" => "id",
                "filterable" => false,
            ],
            [
                "searchable" => true,
                "name" => "code",
                "title" => "Code",
                "data" => "code",
                "visible" => false,
                "filterable" => false,
            ]
        ];
    }
}

@Skintillion I think this is due to the fact that js is not yet processed, thus hidden column attributes is not yet set. I think this can be fixed via css by targeting the columns with visibility to display none.

Perhaps I could do that, but I want the user to be able to select columns as well, and change (save) their visibility. So having it load the visibility through the ajax would be beneficial, and better than a hacky CSS change. I take it this problem is not prevalent on newer versions however?

As I said, when the page loads, the visibility is passed correctly using the html builder, it changes back once the ajax request is loaded, as the data returned does not contain anything about visibility.

Also, thank you for the reply. I love this package, donated a while ago to it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Mopster picture Mopster  路  3Comments

ahmadbadpey picture ahmadbadpey  路  3Comments

hohuuhau picture hohuuhau  路  3Comments

sangnguyenplus picture sangnguyenplus  路  3Comments

techguydev picture techguydev  路  3Comments