Laravel 5 package for handling column sorting with pagination example

Posted 5 years ago By Ajay Gupta 50343

Laravel 5 package for handling column sorting with pagination example

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 blog

Step2: 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'];
}

Step4: Add Route

In this step, I will add route to list user data so that I can test the sorting features of kyslik/column-sortable Laravel package.

routes/web.php

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'));
    }


}

Step6: Create Blade View File "index.blade.php"

Now I will create a directory "users" inside resources/views/ directory and create a file index.blade.php inside the users directory.

resources/views/users/index.blade.php

<!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.

Try this example.

Laravel 5 package for handling column sorting with pagination example

Laravel 5 package for handling column sorting with pagination example

Tags :

Related Posts