Laravel 5 table column sorting and pagination example with kyslik/column-sortable

By | August 12, 2018
laravel 5 table column sorting and pagination

When we create report in our laravel application. We generally show the reports in table format. Sometimes we need to implement sorting on some columns. So that in this example i will show  laravel table columnsorting and pagination with laravel’s kyslik/column-sortable package.

Column sorting is important feature for reporting. You can easily integrate in you application. When we you bootstrp table it provides column sorting on the data which is loaded and if we load more data at a time it will take more time to load which might be frustrating for a person who are viewing the report.

So without loading whole data at a time we can fetch required sorted data. follow the steps below to integrate this feature.

Here i am assuming that you have already done the setup of laravel application.

Step1: Install Laravel Package kyslik/column-sortable

To install this package execute the following command in terminal.

composer require kyslik/column-sortable

After running the above command all the required files have downloaded in vendor directory of your application.

Now add provider in Config/app.file.

Then after publish the configuration file using the command below

php artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"

Srep2: Create model Post.php

In the second step create a model Post.php and add the following code into this file.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Kyslik\ColumnSortable\Sortable;

class Post extends Model
{
    use Sortable;

    protected $fillable = [
        'title', 'description', 'status','author'
    ];

    public $sortable = ['id','title','status','author','created_at'];
}

Here in this model i have used use Kyslik\ColumnSortable\Sortable; to include the column sorting feature

and in Post class using use Sortable; to include all the methods into this post class.

And added a variable $sortable of array with column field name where i want to apply sorting feature.

After doing all this thing let’s move on step 3rd to create a controller.

Step3: Create controller PostController.php

Create a controller file let’s name it PostController.php and put the following code into this file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::sortable()->paginate(10);
        return view('posts.index',compact('posts'));
    }
}

Step4: Create view posts/index.php

In this step we will create a view file to show the data into the table and where we can apply sorting on specific columns which we defined in model file.

So here i am simply creating a posts directory and a file index.php under this directory. Copy the following code into this created index.php file.

@extends('layouts.app')
@section('content')
    <h3 class="text-center">PHPZONE - Laravel 5 column sorting with pagination example with kyslik/column-sortable package</h3>
    <table class="table table-bordered">
        <tr>
            <th>@sortablelink('id')</th>
            <th>@sortablelink('title')</th>
            <th>@sortablelink('status')</th>
            <th>@sortablelink('author')</th>
            <th>@sortablelink('created_at','Created At')</th>
        </tr>
        @if($posts->count())
            @foreach($posts as $post)
                <tr>
                    <td>{{ $post->id }}</td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->status }}</td>
                    <td>{{ $post->author }}</td>
                    <td>{{ $post->created_at->diffForHumans() }}</td>
                </tr>
            @endforeach
        @endif
    </table>
    {!! $posts->appends(request()->except('page'))->render() !!}
</div>

@endsection

Step5: Add route to access the posts

In this last step we will add a route to access the posts and see the column sorting feature.

So add the following code into routes/web.php file.

Route::get('posts', 'PostController@index');

 

After following all the above steps you are done the column sorting integration process.

You can view the demo how would the column sorting feature you have following tin this article.

Demo