how to change the color of each crud entry when ajax table is enabled?

Question

I am using laravel backpack and recently enabled $this->crud->enableAjaxTable(); in my crud because there was a lot of data to show.

But now I am not able to color my crud entries depending upon a expiry_date as I was doing before by overriding list.blade.php like this:

@if (!$crud->ajaxTable())
            @foreach ($entries as $k => $entry)

            <?php
            use Carbon\Carbon;
            $today_date = Carbon::now();


            $data_difference = $today_date->diffInDays(Carbon::parse($entry->expiry_date), false);
            if($data_difference <= 7 && $data_difference >= 0) {
              $color="#FF9900";  
            } elseif($data_difference < 0) {
              $color="#EA2C12";
            } elseif($data_difference > 7) {
              $color="#539E05";
            }
            ?>

            <tr data-entry-id="{{ $entry->getKey() }}" style="color: {{$color}}">

Maybe because of this:

@if (!$crud->ajaxTable())

I tried to customize the AjaxTable.php search query using this link but I was not successful. Here is the code I tried in my ExampleCrudController by overriding search query of ajax:

        public function search()
{
    $this->crud->hasAccessOrFail('list');

    // create an array with the names of the searchable columns
    $columns = collect($this->crud->columns)
                ->reject(function ($column, $key) {
                    // the select_multiple, model_function and model_function_attribute columns are not searchable
                    return isset($column['type']) && ($column['type'] == 'select_multiple' || $column['type'] == 'model_function' || $column['type'] == 'model_function_attribute');
                })
                ->pluck('name')
                // add the primary key, otherwise the buttons won't work
                ->merge($this->crud->model->getKeyName())
                ->toArray();

    // structure the response in a DataTable-friendly way
    $dataTable = new \LiveControl\EloquentDataTable\DataTable($this->crud->query, $columns);

    // make the datatable use the column types instead of just echoing the text
    $dataTable->setFormatRowFunction(function ($entry) {


        $today_date = Carbon::now();

        $data_difference = $today_date->diffInDays(Carbon::parse($entry->expiry_date), false);

            if($data_difference <= 7 && $data_difference >= 0) {
              $color="#FF9900";  
            } elseif($data_difference < 0) {
              $color="#EA2C12";
            } elseif($data_difference > 7) {
              $color="#539E05";
            }

        // get the actual HTML for each row's cell
        $row_items = $this->crud->getRowViews($entry, $this->crud, $color);

        // add the buttons as the last column
        if ($this->crud->buttons->where('stack', 'line')->count()) {
            $row_items[] = \View::make('crud::inc.button_stack', ['stack' => 'line'])
                            ->with('crud', $this->crud)
                            ->with('entry', $entry)
                            ->render();
        }

        // add the details_row buttons as the first column
        if ($this->crud->details_row) {
            array_unshift($row_items, \View::make('crud::columns.details_row_button')
                            ->with('crud', $this->crud)
                            ->with('entry', $entry)
                            ->render());
        }

        return $row_items;
    });

    return $dataTable->make();
}

So my question is how can I color my crud entries depending upon expiry_date when enableajaxtable is active in laravel backpack?

Answer 1

When using AjaxDataTables, the rows no longer taken from the DB directly and outputed as HTML, but taken from the DB with an AJAX call. So your previous code wouldn't work, I'm afraid.

The best way I can think of to achieve the same thing would be to use a custom view for this CRUD panel, with $this->crud->setListView('your-view');. This would allow you to setup some custom JavaScript in that file, to modify DataTables.js to color the rows before it puts them in the table.

A cleaner alternative, if you're using Backpack\CRUD 3.2+, would be to customize the list.js file, to have all that logic there.

Hope it helps!