Laravel - Datatables not working with webpack

40
July 16, 2019, at 3:50 PM

I'm currently adding webpack to existing project, but I'm having a problem setting up Datatables with it. Currently using "yajra/laravel-datatables-oracle": "8.13.6"

When I run npm, my Datatables don't work, and I'm getting this error in console:

admin_vendors.js?v=647:4885 Uncaught TypeError: Cannot read property 'fnInit' of undefined

Webpack configuration:


mix.styles([
    'public/css/style-general.css',
    'public/dist/style.css'
], 'public/css/style.css');
mix.styles([
    'node_modules/datatables.net/css/dataTables.bootstrap3.css'
], 'public/css/admin_vendors.css');
mix.scripts([
    'node_modules/datatables.net/js/jquery.dataTables.js',
    'node_modules/datatables.net-dt/js/dataTabeles.dataTables.js',
    'node_modules/datatables.net-bs/js/dataTables.bootstrap.js',
    'node_modules/jquery-validation/dist/jquery.validate.js',
], 'public/js/admin_vendors.js')
// app styles and scripts
mix.scripts([
    'resources/js/admin.js',
], 'public/js/admin.js')
mix.sass('resources/sass/admin.scss', 'public/css/admin_compiled.css');
mix.copyDirectory('node_modules/datatables.net-dt/images', 'public/images');
if (mix.inProduction()) {
    mix.version();
}

The only guess of why is it not working is that my scripts aren't called in correct order. Currently they are called like this, in my app layout: Header:

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="/metronic/assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/layouts/layout5/css/layout.min.css" rel="stylesheet" type="text/css" />
    <link href="/metronic/assets/layouts/layout5/css/custom.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
    @if(isset($styles))
        @foreach($styles as $key => $value)
            <link rel="stylesheet" href="{{$value}}"/>
        @endforeach 
    @endif

Footer:

    <script src="/metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/scripts/app.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
    <script src="/metronic/assets/layouts/layout5/scripts/layout.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
    <script src="/metronic/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
    <script src="/metronic/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/metronic/assets/global/plugins/moment.min.js"></script>
    @if(isset($scripts))@foreach($scripts as $key => $value)
         <script src="{{$value}}?v={{Config::get('app.assets_version')}}"></script>
    @endforeach @endif
    <script src="/js/main.js"></script>

I'm struggling with this for a while now. Any help is appreciated. If you need any else information or code samples, let me know.

READ ALSO
In amcharts, is there any way to show tooltips text according to condition?

In amcharts, is there any way to show tooltips text according to condition?

I want to show tooltips text in the chart according to my conditionIf my text value is 0 then I want to hide text otherwise show the text of the tooltip

17
Are complex functions plots possible in jsx graph?

Are complex functions plots possible in jsx graph?

Suppose one attempts to plot the complex valued function $f:\mathhbb{C} \to \mathhbb{C}$ as $f(z) =z$ in jsx graphIt may not be complicated as it appears

25
Document Management System/Libraries

Document Management System/Libraries

I am looking for a document management library with basic functionalists like searching, entitlementsPreferably in java

41