TheLazy.Dev
Portfolio GitHub

Blog

laravel |jquery |webdev |tutorial

Adding Datatable to Laravel (The Laravel Mix Way)

dendihandian

Dendi Handian

Posted on February 4, 2021

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.

💖 💪 🙅 🚩
dendihandian
Dendi Handian

Posted on February 4, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Adding Datatable to Laravel (The Laravel Mix Way)
laravel Adding Datatable to Laravel (The Laravel Mix Way)

February 4, 2021