Laravel Datatables – jQuery Datatables API

Projects Inventory

2 months ago

Laravel Datatables is a package that provides an easy way to implement server-side processing of jQuery DataTables in Laravel applications. It simplifies the integration of DataTables, allowing you to manage large datasets efficiently by utilizing AJAX requests for fetching and manipulating data.

Key Features of Laravel Datatables:

Server-Side Processing: Efficiently handle large datasets by processing data on the server instead of loading it all at once in the client.

Custom Querying: Easily customize the data returned by the server based on user input (e.g., filtering, sorting, and pagination).
Integration with Eloquent: Seamlessly integrate with Eloquent models and relationships for easy data management.
Column Customization: Define how each column should be rendered, including custom HTML and formatting.
Support for AJAX: Automatically handles AJAX requests and responses, making it easy to work with asynchronous data loading.

Installation

To get started with Laravel Datatables, follow these steps:

Require the Package: Install the package via Composer:

composer require yajra/laravel-datatables-oracle

1

composer require yajra/laravel-datatables-oracle
Publish the Configuration (Optional): Publish the configuration file using:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

1

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"
Migrate (if needed): If you wish to use the built-in features, ensure you run migrations for the necessary tables.

Setting Up DataTables

Creating a Route: Define a route for fetching the data. For example, in routes/web.php:

Route::get('/posts', [PostController::class, 'index'])->name('posts.index'); Route::get('/posts/data', [PostController::class, 'data'])->name('posts.data');

1
2

Route::get('/posts', [PostController::class, 'index'])->name('posts.index');
Route::get('/posts/data', [PostController::class, 'data'])->name('posts.data');

Controller Setup: Create a controller (if not already done) for handling the DataTable requests:

php artisan make:controller PostController

1	php artisan make:controller PostController

In your PostController.php, implement the methods to return the view and fetch the data:

namespace App\Http\Controllers;

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

class PostController extends Controller
{
    public function index()
    {
        return view('posts.index'); // Return the view for DataTable
    }

    public function data()
    {
        $posts = Post::query(); // Fetch posts using Eloquent

        return DataTables::of($posts)
            ->addColumn('action', function ($post) {
                return '<a href="'.route('posts.edit', $post->id).'" class="btn btn-xs btn-primary">Edit</a>';
            })
            ->make(true);
    }
}

namespace App\Http\Controllers;

use App\Models\Post;

use Yajra\DataTables\DataTables;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index()

{

return view('posts.index'); // Return the view for DataTable

}

public function data()

{

$posts = Post::query(); // Fetch posts using Eloquent

return DataTables::of($posts)

->addColumn('action', function ($post) {

return '<a href="'.route('posts.edit', $post->id).'" class="btn btn-xs btn-primary">Edit</a>';

})

->make(true);

}

Creating the View: Create a Blade view file for displaying the DataTable, e.g., resources/views/posts/index.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Posts</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <h1>Posts</h1>
    <table id="posts-table" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Content</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>

    <script>
        $(document).ready(function() {
            $('#posts-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('posts.data') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'title', name: 'title' },
                    { data: 'content', name: 'content' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Posts</title>

</head>

<body>

<h1>Posts</h1>

<thead>

<tr>

<th>Title</th>

<th>Content</th>

<th>Actions</th>

</tr>

</thead>

</table>

$(document).ready(function() {

$('#posts-table').DataTable({

processing: true,

serverSide: true,

ajax: '{{ route('posts.data') }}',

columns: [

{ data: 'id', name: 'id' },

{ data: 'title', name: 'title' },

{ data: 'content', name: 'content' },

{ data: 'action', name: 'action', orderable: false, searchable: false },

]

});

</script>

</body>

</html>

Customization

Filtering and Searching: You can easily implement server-side filtering and searching by customizing the data() method in your controller.

Column Formatting: Use the editColumn method to customize how specific columns are displayed. For example, to format a date column:

return DataTables::of($posts)
    ->editColumn('created_at', function ($post) {
        return $post->created_at->format('Y-m-d');
    })
    ->make(true);

return DataTables::of($posts)

->editColumn('created_at', function ($post) {

return $post->created_at->format('Y-m-d');

})

->make(true);

Handling Relationships: You can include related data in your DataTable by using Eloquent relationships in the controller:

$posts = Post::with('author')->query();

1

$posts = Post::with('author')->query();

Conclusion

Laravel Datatables is a powerful tool that makes it easy to integrate DataTables with Laravel applications, providing efficient server-side processing for large datasets. By simplifying the implementation of complex querying and handling, it enhances the user experience in applications that require dynamic data tables.

Key Features of Laravel Datatables:

Installation

Setting Up DataTables

Customization

Conclusion

Related Posts: