FixedHeader datatable's plugin not working

[dmarcos89]

Bug report

Hi, im trying to include the fixed header plugin for data tables but not working.. Any idea? Thanks!

What I did:

In resources/views/vendor/backpack/crud/list.blade.php:

@section('after_styles'):
<link href="{{ asset('vendor/adminlte/plugins/datatables/extensions/FixedHeader/css/dataTables.fixedHeader.min.css') }}" rel="stylesheet" type="text/css" />

and 

@section('after_scripts')
<script src="{{ asset('vendor/adminlte/plugins/datatables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js') }}" type="text/javascript"></script>

Then:

var table = $("#crudTable").DataTable({
        "pageLength": {{ $crud->getDefaultPageLength() }},
        /* Disable initial sort */
        "aaSorting": [],
        fixedHeader: true,
        "language": {
...
...
..

Backpack, Laravel:

• Laravel 5.4
• Backpack crud 3.2

[lloy0076]

"Not working" is somewhat too generic.

Any chance there are any logs (from the browser console or laravel logs or web server logs)?

[dmarcos89]

Receiving nothing, no console logs nor laravel logs...

[dmarcos89]

Started using cdn links instead of /vendor ones and works. https://stackoverflow.com/questions/40361437/datatable-fixed-header-not-working

[lloy0076]

I don't usually reopen issues however I think you're saying that:

1. There is a fixed header module included in vendor (somewhere); and
2. It doesn't work if included.

Which sounds like a bug to me.

Am I right?

[dmarcos89]

Yes, updating this:

<link href="{{ asset('vendor/adminlte/plugins/datatables/extensions/FixedHeader/css/dataTables.fixedHeader.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('vendor/adminlte/plugins/datatables/extensions/FixedHeader/js/dataTables.fixedHeader.min.js') }}" type="text/javascript"></script>

to this:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>

..make it work.

might be the version of those files? I don't have much time to test now, but let me know if i can help.

thanks

[tabacitu]

Thank you for sharing your solution @dmarcos89 !

[dmarcos89]

@tabacitu You're welcome!😀 Awesome work by the way!!! 💪 Planning to migrate to Bootstrap4 anytime soon? Glad to help once i have a little time.

[tabacitu]

Of course. It depends a lot on AdminLTE - if they upgrade to Bootstrap 4, we can do that by supporting the latest AdminLTE version. If they don't, we might have to switch to CoreUI or something else that supports bootstrap4... Either way, it's a huge breaking change - a lot of blade files will change - so we'll probably do that for the next big version (backpack 4). I don't expect this to happen sooner than Q3 2018.