Laravel Column Sorting with Pagination Example

Hi, Guys i always try to find something new article for laravel developer so that can be help for his development. So Today i will share with you amazing tutorial of laravel sortable table example, you can can sort your table field with pagination. We will do it column sorting using kyslik/column-sortable composer package in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 app.

As we much know, sorting is important to find quick and perfect data. If you want to get ascending date or descending date of creation users then you have to simple sort data and then get. So same way if you want for name, price, id etc. So here i will explain how to do it using kyslik/column-sortable package.

kyslik/column-sortable package provide simple sorting function and they use font Awesome icons for default, you can also customize it. They provide sortable() helper for query builder.

I will give you very simple example from scratch, so you can easily understand and customize as you want. you can also use in your laravel different version, So here i am going to share from scratch.

After end of the tutorial you will get layout like as bellow and easily sorting with each field. So let's just follow.

Preview:

Step 1: Install Laravel Application

we are going from scratch so, if you haven't laravel application in your machine then we have to get fresh laravel application. So run bellow command and get clean fresh laravel application.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install kyslik/column-sortable Package

Here, we will add kyslik/column-sortable package for sorting so open your terminal and run bellow command:

composer require kyslik/column-sortable

After successfully install package, you have to open config/app.php file and add service provider and alias.

config/app.php

'providers' => [
	....
	Kyslik\ColumnSortable\ColumnSortableServiceProvider::class,
]
.....

You can publish the default configuration file by following command:

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

After run above configuration command, you will find columnsortable.php file in config folder. You can simply change default configuration.

Step 3: Create Product Table and Model

In this step, we will create migration for products table using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_products_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create products table.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->text('details');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

After create "products" table you should create Product model for products, so first create file in this path app/Product.php, In this model you have to also add Sortable facade. So put bellow content in Product.php file:

app/Product.php

<?php

namespace App;

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

class Product extends Model
{
	use Sortable;

    protected $fillable = [ 'name', 'details' ];

	public $sortable = ['id', 'name', 'details', 'created_at', 'updated_at'];
}

Step 4: Add Route

In this is step we need to create route for listing products lists. so open your routes/web.php file and add following route.

routes/web.php

Route::get('myproducts', 'ProductController@index');

Step 5: Create ProductController Controller

Here, we should create new controller as ProductController in this path app/Http/Controllers/ProductController.php. this controller will manage all listing products and soring helper, so put bellow content in controller file:

app/Http/Controllers/ProductController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class ProductController extends Controller
{
    /**
     * Display the products dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::sortable()->paginate(5);
        return view('products',compact('products'));
    }

}

Step 6: Create products View File

now at end of the tutorial, let's create products.blade.php(resources/views/products.blade.php) for layout and we will write design code here and put following code:

resources/views/products.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5 - Column sorting with pagination example from scratch</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" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <h3 class="text-center">Laravel 5 - Column sorting with pagination example from scratch</h3>
    <table class="table table-bordered">
        <tr>
            <th width="80px">@sortablelink('id')</th>
            <th>@sortablelink('name')</th>
            <th>@sortablelink('details')</th>
            <th>@sortablelink('created_at')</th>
        </tr>
        @if($products->count())
            @foreach($products as $key => $product)
                <tr>
                    <td>{{ $product->id }}</td>
                    <td>{{ $product->name }}</td>
                    <td>{{ $product->details }}</td>
                    <td>{{ $product->created_at->format('d-m-Y') }}</td>
                </tr>
            @endforeach
        @endif
    </table>
    {!! $products->appends(\Request::except('page'))->render() !!}
</div>

</body>

</html>

Ok finally we got full example, you have to make sure add some dummy records on products table, so run our example so run bellow command:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/myproducts

You can get more information about package from here:Kyslik/column-sortable.

I hope it can help you....