DEV Community

Cover image for Adding Datatable to Laravel (The Laravel Mix Way)
Dendi Handian
Dendi Handian

Posted on • Edited on

3 1

Adding Datatable to Laravel (The Laravel Mix Way)

Prerequisites

Make sure you have jquery built in the app.js assets. The example for setup the jQuery in Laravel follows the Laravel/UI auth scaffolding with Bootstrap mode. In the resource/js/bootstrap.js, we could see the jquery is imported:

...

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

...
Enter fullscreen mode Exit fullscreen mode

Installing Datatable

If you're currently using Bootstrap 4 for the project, you may want to use the bootstrap 4 styled datatable by installing it:

npm install datatables.net-bs4 --save-dev
Enter fullscreen mode Exit fullscreen mode

or if you want to keep the datatable plain, use this instead:

npm install datatables.net --save-dev
Enter fullscreen mode Exit fullscreen mode

Build Datatable

If you're using bootstrap 4, just import the datatable inside the mentioned jquery import code block above:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('datatables.net-bs4');
} catch (e) {}
Enter fullscreen mode Exit fullscreen mode

also, make sure to apply the styles:

...

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// Datatables BS4
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";

...
Enter fullscreen mode Exit fullscreen mode

or for plain datatable, you only need to modify the js script:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('datatables.net');
} catch (e) {}
Enter fullscreen mode Exit fullscreen mode

then build the assets by:

npm run development
Enter fullscreen mode Exit fullscreen mode

or

npm run production
Enter fullscreen mode Exit fullscreen mode

Test the Datatable

Let's create a new route like this:

routes\web.php:

...

Route::get('/datatable-example', function(){
    return view('datatable-example');
});

...
Enter fullscreen mode Exit fullscreen mode

and a new view blade file named datatable-example.blade.php and fill it with:

resources\views\datatable-example.blade.php:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel Datatable Example</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row vw-100 vh-100 d-flex justify-content-center align-items-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                    <table id="product-table" class="table table-sm table-bordered">
                        <thead>
                            <th>No</th>
                            <th>Product Name</th>
                            <th>Stock</th>
                            <th>Price</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Peanut Butter</td>
                                <td>10</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Peanut Butter Chocolate</td>
                                <td>5</td>
                                <td>50</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Peanut Butter Chocolate Cake</td>
                                <td>3</td>
                                <td>100</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Peanut Butter Chocolate Cake with Kool-aid</td>
                                <td>2</td>
                                <td>150</td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
    <script>

        $(function () {
            $('#product-table').DataTable({
                processing: true,
                serverSide: false
            });
        });

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Check it out on the browser.

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay