In this Laravel 5.6 Tutorial, I will let you know how to implement column sorting and pagination with example using
kyslik/column-sortable package.
This is very easiest way to get links on the column headings in the table to sort the table data.
User can easily traverse on the long list of paginated records by sorting column with the help of
kyslik/column-sortable package in Laravel 5.6
You can sort the database results based on a specific column either in ascending or descending order.
By default, It will use the default font classes of Font Awesome to show the icons for sorting orders.
This is very helpful package for the developers to develop admin panel where they can easily implement the sorting features by following few steps in Laravel 5
Step1: Download the fresh Laravel application
In this step, I will download the fresh application of Laravel to start from the scratch.
composer create-project --prefer-dist laravel/laravel blogStep2: Install the Laravel Package kyslik/column-sortable
Now in this step, I will add the
kyslik/column-sortable Laravel package to start working on sorting results.
Run the following command to install the package :
composer require kyslik/column-sortable
Now open the
app.php file from config directory and add the service provider in providers array.'providers' => [ .... Kyslik\ColumnSortable\ColumnSortableServiceProvider::class, ] .....
Now publish the configuration file for
kyslik/column-sortable package in Laravel.php artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"
When you run above command to publish the pacage configuration file then you will get following response :
Copied File [/vendor/kyslik/column-sortable/src/config/columnsortable.php] To [/config/columnsortable.php] Publishing complete.Step3: User.php Model
In this step, add sortable scope to the "User" models.
<?php namespace App; use Illuminate\Notifications\Notifiable; use Illuminate\Foundation\Auth\User as Authenticatable; use Kyslik\ColumnSortable\Sortable; class User extends Authenticatable { use Sortable; use Notifiable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'name', 'email', 'password' ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', ]; public $sortable = ['id','name','email','created_at']; }
In this step, I will add route to list user data so that I can test the sorting features of
routes/web.phpkyslik/column-sortable Laravel package.Route::get('users', 'UserController@index');
Step5: Create UserController.php
In this step, I will create UserController.php file in following path app/Http/Controllers/
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\User; class UserController extends Controller { /** * Display the products dashboard. * * @return \Illuminate\Http\Response */ public function index() { $users = User::sortable()->paginate(10); return view('users.index',compact('users')); } }
Now I will create a directory "users" inside resources/views/ directory and create a file
resources/views/users/index.blade.phpindex.blade.php inside the users directory.<!DOCTYPE html> <html> <head> <title>Laravel 5 package for handling column sorting with pagination example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h3 class="text-center">Laravel 5 package for handling column sorting with pagination example</h3> <table class="table table-bordered"> <tr> <th>@sortablelink('id')</th> <th>@sortablelink('name')</th> <th>@sortablelink('email')</th> <th>@sortablelink('created_at','Created At')</th> </tr> @if($users->count()) @foreach($users as $user) <tr> <td>{{ $user->id }}</td> <td>{{ $user->name }}</td> <td>{{ $user->email }}</td> <td>{{ $user->created_at->diffForHumans() }}</td> </tr> @endforeach @endif </table> {!! $users->appends(request()->except('page'))->render() !!} </div> </body> </html>
In
@sortablelink() method, You will define the column name in the first parameter that needs to be sorted and in the second column, you will define the title that will be displayed inside anchor tags.
0 comments