DEV Community

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

Posted on • Edited on

Adding Datatable to Laravel (The Laravel Mix Way)

#laravel #jquery #webdev #tutorial

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.

Top comments (0)