Laravel 8 Tutorial - Livewire Search With Pagination

In this tutorial, we are going to learn about Livewire Search With Pagination. So, let's see how we can create a search feature with pagination.

In our previous video, we created a Livewire CRUD application. Now, let's add a search box to it. To do this, go to the students.blade.php view file.

Inside the card header, add an input text field for search input text.

Next, go to the Students.php component class file. Here, let's create a property:

public $searchTerm;

Now, inside the render method, write the following code:

public function render()
{
	$search = '%' . $this->searchTerm. '%';
	$students  = Student::where('firstname','LIKE',$search)
				->orWhere('lastname','LIKE',$search)
				->orWhere('email','LIKE',$search)
				->orWhere('phone','LIKE',$search)
				->orderBy('id','DESC')->paginate(5);        
	return view('livewire.students',['students'=>$students]);
}

Also, import WithPagination and use it inside the class. So, write the following code before the class:

use Livewire\WithPagination;

Now, inside the class, use this by writing the following code:

 use WithPagination;

Next, go to the students.blade.php file and add the pagination link. So, after the table, write the following code:

{{$students->links()}}

Now, add some CSS inside the section by writing the following code:

<style>
	nav svg{
		max-height:20px;
	}
</style>

Save all files and let's check it. Switch to the browser and refresh the page. Here, you can see the search field. Now, just enter any text here. You can see it works, and also, you can see the pagination links.

So, in this way, we can create Livewire Search With Pagination.