Livewire DataTables Screencast: Sorting not working

#1

I’m following the livewire screencast series(Building DataTables) Here is my LiveWire Component:

class UsersTable extends Component
{

    use WithPagination;

    public $search = "";
    public $sortField;
    public $sortDirection = 'asc';

    public function sortBy($field)
    {
        if ($this->sortField === $field) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortDirection = 'asc';
        }

        $this->sortField = $field;
    }

    public function render()
    {
        //        sleep(1);
        //    dd($this->sortField);
        $users = User::where('name', 'like', '%'.$this->search.'%')
            ->orderBy($this->sortField, $this->sortDirection)
            ->paginate(10);

        return view('livewire.admin.users', compact('users'))->layout('layouts.admin');
    }
}

Here since, $this->sortField; (is null) it is crashing when executing

  $users = User::where('name', 'like', '%'.$this->search.'%')
            ->orderBy($this->sortField, $this->sortDirection)
            ->paginate(10);

since, the $this->sortField is null, it is displaying like

SQLSTATE[42S22]: Column not found: 1054 Unknown column '' in 'order clause'

But in the screencast, it’s working well. How is that?

#2

Set a default sort option:
public $sortField = ‘name’;

This will be used on load before a column has been clicked on.

1 Like
#3

I fixed it by when() query. Thanks for the help.

2 Likes