Paginated data with Search functionality

06:15   Laravel

 

In previous posts we saw about pagination and search functionality individually. Here we ‘ll combine search functionality with paginated data results.
Its quite common to inculude search option and pagination functionality for displaying any type of large data. So instead of using some table table extenders which fetch all the records at a time its better to use built in paginators which only gets the required number of records each time.
Here in this elegant framework, Laravel, its quite easy to implement these functionalities with very few lines of code.
First we ‘ll show a chunks of dummy data with about 1000 rows and limiting to only 25 rows per page. This dummy data is collected from Mockaroo.com.

    Project on Github

Route::get ( '/', function () { $dummyDetails = User::paginate(25); return view ( 'welcome' )->withUsers($dummyDetails); } );

1 2 3 4

Route::get ( '/', function () {     $dummyDetails = User::paginate(25);     return view ( 'welcome' )->withUsers($dummyDetails); } );

for reference, you can find the dummy details sql file here

Pagination View :

Now in the view file  welcome.blade.php, we show this data limiting to only 25 results per page.

<div class="container"> @if(isset($users)) <h2>Sample User details</h2><table class="table table-striped"> <thead><tr> <th>Name</th> <th>Email</th> </tr></thead> <tbody> @foreach($users as $dummy) <tr> <td>{{$dummy->name}}</td> <td>{{$dummy->email}}</td> </tr>@endforeach </tbody> </table>{!! $users->render() !!}@endif </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<div class="container">     @if(isset($users))     <h2>Sample User details</h2>         <table class="table table-striped">             <thead>                 <tr>                     <th>Name</th>                     <th>Email</th>                 </tr>             </thead>             <tbody>                 @foreach($users as $dummy)                 <tr>                     <td>{{$dummy->name}}</td>                     <td>{{$dummy->email}}</td>                 </tr>                 @endforeach             </tbody>         </table>         {!! $users->render() !!}@endif     </div>

Search functionality with paginated data

Search Form :

Now we ‘ll use the form for search field which we created in previous post on Search functionality.

<div class="container"> <form action="/search" method="POST" role="search"> {{ csrf_field() }} <div class="input-group"> <input type="text" class="form-control" name="q" placeholder="Search users"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div></form></div>

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="container">         <form action="/search" method="POST" role="search">             {{ csrf_field() }}             <div class="input-group">                 <input type="text" class="form-control" name="q"                     placeholder="Search users"> <span class="input-group-btn">                     <button type="submit" class="btn btn-default">                         <span class="glyphicon glyphicon-search"></span>                     </button>                 </span>             </div>         </form>     </div>

Pagination and Search logic :

The logic for a handling search is,

Route::any ( '/search', function () { $q = Input::get ( 'q' ); if($q != ""){ $user = User::where ( 'name', 'LIKE', '%' . $q . '%' )->orWhere ( 'email', 'LIKE', '%' . $q . '%' )->paginate (5)->setPath ( '' ); $pagination = $user->appends ( array ( 'q' => Input::get ( 'q' ) ) ); if (count ( $user ) > 0) return view ( 'welcome' )->withDetails ( $user )->withQuery ( $q ); } return view ( 'welcome' )->withMessage ( 'No Details found. Try to search again !' ); } );

1 2 3 4 5 6 7 8 9 10 11 12

Route::any ( '/search', function () {     $q = Input::get ( 'q' );     if($q != ""){     $user = User::where ( 'name', 'LIKE', '%' . $q . '%' )->orWhere ( 'email', 'LIKE', '%' . $q . '%' )->paginate (5)->setPath ( '' );     $pagination = $user->appends ( array (                 'q' => Input::get ( 'q' )         ) );     if (count ( $user ) > 0)         return view ( 'welcome' )->withDetails ( $user )->withQuery ( $q );     }         return view ( 'welcome' )->withMessage ( 'No Details found. Try to search again !' ); } );

    Project on Github

Here we used HTTP method any() Route::any() but in previous post on search we used HTTP method post() Route::post(). The difference is in previous post we just fetch data from the database and show the result, as we are interacting with database we should use post method, where as here we first fetch the all the data(all 1000 records) so post method and then we show only 5 results(paginated value here is 5)of them, so when we click next button of the pagination then we should get the already obtained results, so here get method is used. As we are using both post and get methods . We write the route as Route::any()

Search functionality with paginated data

Here while showing search results we limited data to only 5 results per page.

     Project on Github

That’s it folks we ‘ve successfully implemented search functionality with paginatated data. Make sure you ‘ve gone through previous posts on search and pagination.