DEV Community

loading...
Cover image for Adding Datatable to Laravel (The Laravel Mix Way)

Adding Datatable to Laravel (The Laravel Mix Way)

dendihandian profile image Dendi Handian Updated on ・2 min read

Prerequisites

Make sure you have jquery built in the app.js assets. The example for installing jQuery is by using or looking at 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 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 dev
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="{{ asset('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="{{ asset('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.

Discussion (0)

pic
Editor guide