How to apply datatables in AdminLTE?

battoualex commented 7 years ago

I am trying to apply the DataTables to my project, but I don't know how include the DataTables CSS and JS files. I tried to include the files but I have a error in Vue.js (Uncaught TypeError: $(...).dataTable is not a function).

htmlheader.blade.php

<link href="{{ asset('/plugins/datatables/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />

index.blade.php

`@extends('adminlte::layouts.app')

@section('htmlheader_title') {{ trans('adminlte_lang::message.home') }} @endsection

@section('contentheader_title') {{ 'Catálogo de Áreas' }} @endsection

@section('main-content')

@include('areas.partials.table')

<!-- jQuery -->
<script src="{{ asset('/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>
<!-- DataTables -->
<script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js) }}"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $('#MyTable').dataTable();
    });
</script>

@endsection`

Please, help :(

marioene commented 7 years ago

After several attempts, I optimize for myself DataTables in my projects with this awesome package.

Is very important the order for css and js files.

htlmheader.blade.php (folder: resources/views/layouts/):

<head>
    <meta charset="UTF-8">
    <title>@yield('htmlheader_title', '...')</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta name="description" content="">
    <meta name="author" content="Mario Ene">

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ asset('favicon/favicon.png') }}">

    <!-- Dom PDF - suport UTF-8  -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- Bootstrap 3.3.4 -->
    <link href="{{ asset('/css/bootstrap.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/css/animate.css') }}" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link href="{{ asset('/plugins/ionicons/ionicons.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="{{ asset('/css/skins/skin-blue.css') }}" rel="stylesheet" type="text/css" />
    <!-- iCheck -->
    <link href="{{ asset('/plugins/iCheck/square/blue.css') }}" rel="stylesheet" type="text/css" />

    <!-- DataTables -->
    <link href="{{ asset('/plugins/datatables/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />

    <!-- DataTables Export to Copy, CSV, Excel, PDF-->
    <link href="{{ asset('/plugins/datatables/jquery.dataTables.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/plugins/datatables/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- Theme style -->
    <link href="{{ asset('/css/AdminLTE.css') }}" rel="stylesheet" type="text/css" />

    @yield('header')
</head>

app.blade.php (folder: resources/views/layouts/):

<html lang="en">
@section('htmlheader')
    @include('layouts.partials.htmlheader')
@show

<body class="skin-blue sidebar-mini @if(isset($collapsed)) sidebar-collapse @endif>
    <div class="wrapper">
        @include('layouts.partials.mainheader')
        @include('layouts.partials.sidebar')
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Main content -->
            <section class="content">
                <!-- Your Page Content Here -->
                @yield('main-content')
            </section><!-- /.content -->
        </div><!-- /.content-wrapper -->
        @include('_layouts.partials.footer')
    </div><!-- ./wrapper -->   
    @include('layouts.partials.scripts')
    @yield('special-scripts')
</body>
</html>

scripts.blade.php (folder: resources/views/layouts/partials):

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.1.4 -->
<script src="{{ asset('/plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>

<!-- Bootstrap 3.3.2 JS -->
<script src="{{ asset('/js/bootstrap.min.js') }}" type="text/javascript"></script>

<!-- DataTables -->
<script src="{{ asset('/plugins/datatables/jquery.min.js') }}"></script>
<script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js') }}"></script>

<!-- DataTables Export to Copy, CSV, Excel, PDF-->
<script src="{{ asset('/plugins/datatables/export/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('/plugins/buttons/buttons.html5.min.js') }}"></script>
<script src="{{ asset('/plugins/datatables/datatables.bootstrap.js') }}"></script>
<script src="{{ asset('/plugins/datatables/handlebars.js') }}"></script>        

<!-- Optionally, you can add Slimscroll and FastClick plugins.
      Both of these plugins are recommended to enhance the
      user experience. Slimscroll is required when using the
      fixed layout. -->

<!-- jQuery-UI -->
<script src="{{{ asset('/plugins/jQueryUI/jquery-ui.js') }}}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('/js/app.min.js') }}" type="text/javascript"></script>

index.blade.php:

@extends('layouts.app')
@section('htmlheader_title')
...
@endsection

@section('main-content')
   @include('events.includes.table')
@endsection

{{-- Scripts --}}
@section('special-scripts')
    @include('events.includes.js_table')
@endsection

js_table.blade.php:

<script type="text/javascript">
    var dt = $('#table-events').DataTable({
        stateSave: true,
        processing: true,
        serverSide: true,
        responsive: true,       
        order: [[ 0, "desc" ]],
        lengthMenu: [[5, 10, -1], [5, 10, "All"]],
        dom: "<'top'fl><'col-sm-4'B>rt<'bottom'ip><'clear'>",
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],            
        ajax: {
            url: '{{ URL::to('events/data') }}',
        },
            "columns": [
                {data: 'id', name: 'id'},
            {data: 'd_start', name: 'd_start'},
                {data: 'd_end', name: 'd_end'},
                {data: 'title', name: 'title'},
                {data: 'description', name: 'description'},
                {data: 'url', name: 'url'},
                {data: 'observations', name: 'observations'},
                {data: 'backgroundColor', name: 'backgroundColor'},
                {data: 'borderColor', name: 'borderColor'},
                {data: 'actions', name: 'actions',orderable:false, searchable: false},
            ],

            "language": {
                url: '{{ asset('/plugins/datatables/localisation/Romanian.json') }}',
                sLoadingRecords : '<span style="width:100%;"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>'
            },
            initComplete: function () {
                this.api().columns('.events-filter').every(function () {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).attr( 'style', 'text-align: center;width: 100%');
                    $(input).appendTo($(column.footer()).empty())
                    .on('keyup change', function () {
                        var val = $.fn.dataTable.util.escapeRegex($(this).val());

                        column.search(val ? val : '', true, true).draw();
                    });
                });
            }           

    });

    $( "#bFilter" ).click(function() {
        dt.table().state.clear();
        window.location.reload();
    });

</script>

acacha commented 7 years ago

Ok thanks for the info!

mdbootstrap / adminlte-laravel

How to apply datatables in AdminLTE? #186