Laravel 9 Sorting Columns with Pagination

Today, We are going to learn Sorting Columns with Pagination in Laravel 9. Sorting is any process of arranging items systematically, and has two common, yet distinct meanings:

• ordering: arranging items in a sequence ordered by some criterion;
• categorizing: grouping items with similar properties.

Sorting the columns in ascending or descending order. This help the visitor to easy sort the data according to there requirement.

So, Today we are learning how to sort columns data with pagination in laravel 9.

Also Read : How to Create Tabs Using Tailwind CSS and Alpine JS

Laravel 9 Sorting Columns with Pagination :

• Step 1 : Installing Fresh Laravel 9 Project
• Step 2 : Installing kyslik/column-sortable Package
• Step 3 : Creating Database, Tables and Models
• Step 4 : Creating Routes
• Step 5 : Creating Controllers
• Step 6 : Creating Views Blade File
• Step 7 : Result of Sorting Columns with Pagination
• Step 8 : Conclusion

Above are the steps on how to create sorting columns with pagination. so, let get started.

Step 1 : Install Fresh Laravel 9 Project

So the first step is to install a fresh laravel 9 project. We are going run the following command to install a fresh laravel 9 project.

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

laraveltuts is the project name which are using.

Step 2 : Installing kyslik/column-sortable Package

We are going to use kyslik/column-sortable Package for this example. To install the package run the following command:

composer require kyslik/column-sortable

Read more about the package Github.

After you install the package now you need to add service provider and alias by going into config/app.php directory. Add the the following code to the file.

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

Also Read : Fetch records from MySQL with jQuery AJAX – Laravel 9

Now publish the default configuration by the following command.

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

by running the above command you will notice a new has been created columnsortable.php in the config folder. If you like you can change the default configuration to the file.

Step 3 : Creating Database, Tables and Models

Now we are going to create database, tables and models for the project. First we need to create a database.

Go to phpmyadmin and create a new database and name it anything you like for this example we are using laraveltuts.

Now add the database details to the .env file of you Laravel 9 project.

After creating a table we are going to create a table. We are going to create a product table. Run the following command to create a table.

php artisan make:migration create_products_table

This will create a new file under database/migrations folder as you can seen in above image.

Also Read : How to create Custom Laravel Helpers in Laravel 9

Now we need to add some fields to the default table value. So change the code as show below:

Schema::create('products', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->text('details');
    $table->timestamps();
});

As table been created. Please add some records for demo / testing purpose. We are now creating a models for the product. So run the following command to create a product model

php artisan make:model Product

Add the following code to the product model you can find it in app\Models\Product.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

use Kyslik\ColumnSortable\Sortable;

class Product extends Model
{
    use HasFactory, Sortable;

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

Now we are created database, table and model. Next step is to add some routes.

Step 4 : Creating Routes

So now our next step is to add some routes for the project. Open a web.php file you can find it in routes/web.php and add the following line to the file.

Route::get('/products', 'App\Http\Controllers\ProductController@index');

Step 5 : Creating Controllers

Now the route has been created we are now creating a products controllers. This controller will help us to sorting the product, displaying the view etc.

Also Read : How to Send Email using PHPMailer in Laravel 9

To create a ProductController run the following command:

php artisan make:controller ProductController 

You can find the controller in app/Http/Controllers/ProductController.php and add the following code to the ProductController:

<?php

namespace App\Http\Controllers;

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

class ProductController extends Controller
{
    //Display the Blade View
    public function index()
    {
        $products = Product::sortable()->paginate(5);
        return view('products',compact('products'));
    }
    
}

Step 6 : Creating Views Blade File

Now everything is done at last we are going to create a blade file for view. This View is going to display the table and its data.

We are using a bootstrap and Fontawesome CDN for the following view. Get the latest version of Bootstrap and Fontawesome.

Now create a new view file in with a name products.blade.php in resources/view/ folder.

And add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Sorting Columns with Pagination from scratch - LaravelTuts</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 9 Sorting Columns with Pagination from scratch - LaravelTuts</h3>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th width="80px">@sortablelink('id')</th>
                    <th>@sortablelink('name')</th>
                    <th>@sortablelink('details')</th>
                    <th>@sortablelink('created_at')</th>
                </tr>
            </thead>
            <tbody>
                @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
            </tbody>
        </table>
        {!! $products->appends(\Request::except('page'))->render() !!}
    </div>
</body>
</html>

Now everything is done. Last step is to start a server to do so run the following command in terminal:

php artisan serve

Also Read : Laravel 9 – Drag and Drop file upload using Dropzone

Step 7 : Result of Sorting Columns with Pagination

Step 8 : Conclusion

So, Today we had learn how to Sorting Columns with Pagination in Laravel 9. Hope this tutorial helped you for the beginning of you Laravel journey. If you find this tutorial helpful or have any problem with the code you can contact me by the below comment section.

Also Read : Autocomplete Search using jQuery UI in Laravel 9