When I first was trying to set my project using Laravel Jetstream with Inertia and VueJs I spent so much time trying to figure out how to implement jQuery Datatables in my project. In this article I'm going to show you how to do just that step by step.
Set up your Laravel Project
composer create-project laravel/laravel my-crmor vialaravel command if you have that installed
laravel new my-crmNext let's installJetstream
composer require laravel/jetstreamInstall Inertia with Vuejs
php artisan jetstream:install inertiaInstall & build NPM dependencies
npm installnpm devMigrate your database
php artisan migrateInstall the amazing datatables laravel package by Yajra
composer require yajra/laravel-datatables-oracle:"~9.0"Install Datatables
npm install datatables.net-dtnpm i jqueryImplement Datatables
On yourweb.php routes file, let's add necessary routes to load our resources
Route::resource('users', UsersController::class);Route::name('users.datatables')->get('users', [UsersController::class, 'datatables']);Now, create aUsersController and add the following
<?phpnamespace App\Http\Controllers;use App\Models\User;use Illuminate\Http\Request;use Inertia\Inertia;class UsersController extends Controller{ /** * Datatable Columns Array * * @var Array */ private $datatableColumns; /** * Datatable Headers Array * * @var Array */ private $datatableHeaders; /** * Datatables Data URL * * @var String */ private $datatableUrl; /** * Controller constructor * * @return void */ public function __construct() { $this->datatableHeaders = [ 'ID', 'Name', 'Email' ]; $this->datatableColumns = [ ['data' => 'id'], ['data' => 'name'], ['data' => 'email'] ]; $this->datatableUrl = route('users.datatables'); } /** * Get datatables JSON Response * * @return \Illuminate\Http\Response */ public function datatables() { $datatables = datatables() ->of(User::query()) ->addColumn('id', fn($user) => $user->id) ->addColumn('name', fn($user) => $user->name) ->addColumn('email', fn($user) => $user->email) ->toArray(); return response()->json($datatables); } /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index(Request $request) { return Inertia::render('Users/Index') ->with('datatableUrl', $this->datatableUrl) ->with('datatableColumns', $this->datatableColumns) ->with('datatableHeaders', $this->datatableHeaders); }Now that we've got that out of the way, let's build our Vuejs components.
The first component we will be creating is theUsers/Index.vue component. Inside yourresources/js folder create a new folder calledUsers and inside this folder create a.vue file calledIndex.vue
// resources/js/Pages/Users/Index.vue<template> <div> <!-- we will display our datatable here --> </div></template><script> export default { }</script>We will get back and change this file later.
Now let's create ourDatatable component.
Again insideresources/js add a new folder calledShared and inside this folder create file calledDatatable.vue
// resources/js/Shared/Datatable.vue<template> <div> <table> <thead> <tr> <th v-for="header in headers" :key="header.id">{{ header }}</th> </tr> </thead> </table> </div></template><script> import 'jquery/dist/jquery.min.js'; import "datatables.net-dt/js/dataTables.dataTables" import $ from 'jquery'; export default { props: ['url', 'columns', 'headers'], mounted(){ let datatable = $('#dt-users').on('processing.dt', function(e, settings, processing) { if (processing) { $('table').addClass('opacity-25'); }else { $('table').removeClass('opacity-25'); } }).DataTable({ ajax: { url: this.url, }, serverSide: true, processing: true, paging: true, columns: this.columns, }); }, }</script>Go back toresources/js/Pages/Users/Index.vue and import this file as followed:
// final version of resources/js/Users/Index.vue<template> <div> <Datatable :url="datatableUrl" :headers="datatableHeaders" :columns="datatableColumns" /> </div></template><script> import Datatable from '@/Shared/Datatable' export default { components: { Datatable, }, props: ['datatableUrl', 'datatableColumns', 'datatableHeaders'], }</script>And that's it! Leave questions in the comment section.
Happy coding.
Cover image creditpikisuperstar
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
