Where to put Datatables JS logic in laravel using laravel mix?

Question

I am new to all of this. I'm so sorry this weird question.

I am planning to use Yajra Datatables Package to show some dynamic tables in Laravel. I have Laravel Mix installed. Apperantly datatables needs to js logic to work like sending/getting stuff with ajax.

In Laravel Mix Docs it says:

Similar to combining stylesheets with mix.styles(), you may also combine and minify any number of JavaScript files with the scripts() method

If i do this, will all of my pages that needs js will also include this particular Datatables logic for a particular table? Is this okay?

Ive mix installed but should i still use the "public/js" directory to include these type of scripts when they are needed?

tldr; Where should i put the js logic needed for datatables package in laravel?

Edit: Here is some example code. Where should i put this? I can just put in inside the related blade view but is it a good way of doing this?

 <script>
   $(document).ready( function () {
    $('#MyDatatable').DataTable({
           processing: true,
           serverSide: true,
           ajax: "{{ url('users-all') }}",
           columns: [{ data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }]});});
  </script>

Also abit unrelated but, should i use the npm version of datatables instead? Is it better, or maybe easier to use for newcomers?: npmjs.com/package/datatables — Bad English sry
– Bad English sry, Commented Jul 30, 2019 at 14:51

mhrabiee · Accepted Answer · 2019-07-31 19:09:28Z

1

Basically what you do is correct but for reference:

1.First add datatables to your project via NPM or CDN. (Don't forget jQuery before datatables)

CDN

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

NPM

npm install datatables --save-dev

Import datatable in your project (For example if you are using Laravel deafult app.js)

import 'datatables/media/css/jquery.dataTables.css';
import 'datatables';

2.Then You have multiple option but you can add something like stack('scripts') in your layout file and include your script in your blade view.

For example: master.blade.php (Example layout)

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
</head>
<body>
@yield('content')
@stack('scripts')
</body>
</html>

dashbboard.blade.php (Example page)

@extends('layouts.master')

@section('content')
<h1>My Awesome Tables</h1>
<div id="MyDatatable"></div>
@endsection

@push('scripts')
    $(document).ready(function () {
        $('#MyDatatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('users-all') }}",
            columns: [{data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'created_at', name: 'created_at'}]
        });
    });
@endpush

We should use this approach because you use {{ url('users-all') }} so it must be in blade so you can print it. other wise you can use it on your app.js and add your url endpoint in other way.

answered Jul 31, 2019 at 19:09

mhrabiee

82510 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bad English sry Over a year ago

Stacks looks nice. Thank you alot. btw should i use the api auth stuff in laravel docs for using ajax?

mhrabiee Over a year ago

Your welcome. If it's useful please consider answer as accepted. Yes you should use respective CSRF token. more info at laravel.com/docs/5.8/csrf#csrf-x-csrf-token

Bad English sry Over a year ago

I was talking about this: laravel.com/docs/5.8/api-authentication You give users an api_token and expect it during api calls? you also your api routing instead of the web routing? Are these really necessary? There is also a hashed version which needs its additional page to initialize and refresh the hashed token. I really don't understand it. Where do you even save that token in the client side? cookie?

mhrabiee Over a year ago

Well in this case i dont know how to do it sorry.

Collectives™ on Stack Overflow

Where to put Datatables JS logic in laravel using laravel mix?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related