Fixed Header isn't working for me - Code and photos inside here.

logan3043

I went through the download builder and did include the fixed header. I'm using cdn to insert the libs.
Thank you for your assistance.

I'd like the show entries, search bar and thead to sticky-top.

This is before scrolling the table down:

This is after scrolling the table down:

Here is my table structure:

<table id="customers" class="table table-hover">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>State</th>
                                <th>Zip</th>
                                <th>Phone</th>
                                <th>E-mail</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody id="table_body">
                            @if($customer_list)
                                @foreach($customer_list as $customer)
                                    <tr href="#">
                                        <td>
                                            <a href="#"
                                               class="nav-link font-weight-bold">{!! $customer->first_name . ' ' . $customer->last_name !!}</a>
                                        </td>
                                        <td>
                                            <span class="table-span">{!! $customer->address !!}</span>
                                        </td>
                                        <td>
                                            <span class="table-span">{!! $customer->city !!}</span>
                                        </td>
                                        <td>
                                            <span class="table-span">{!! $customer->state !!}</span>
                                        </td>
                                        <td>
                                            <span class="table-span">{!! $customer->zip !!}</span>
                                        </td>
                                        <td>
                                            <span class="table-span">{!! $customer->phone !!}</span>
                                        </td>
                                        <td>
                                            <span class="table-span">{!! $customer->email !!}</span>
                                        </td>
                                        <td>
                                            <a href="#">
                                                <i class="fa fa-close"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>

Here are my scripts at the bottom of the page:

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/fh-3.1.4/sc-2.0.0/datatables.min.js"></script>
    <script>
        $(document).ready(function () {


            $(document).ready(function () {
                $('#customers').DataTable();

            });

            var table = $('#customers').DataTable({ //Hier wird die Tabelle zu einem DataTable gemacht (genaue Erklärungen auf DataTables.net).
                fixedHeader : {
                    header : true,
                    footer : false,
                    headerOffset: 0
                },
            });

        });
    </script>

Here is the cdn link from the head:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/fh-3.1.4/sc-2.0.0/datatables.min.css"/>

kthorngren

I tried your code in this test case and it seems to work:
http://live.datatables.net/mibagoxi/1/edit

Are you showing all of your Datatables init code?

Looks like you you might also be using the Scroller extension - at least you are loading the JS. Scroller and FixedHeader are not compatible to be used on the same Datatable. You can see this in the Compatibility Matrix.

If you are not using Scroller then there is something specific to your page that is causing the issue . Without seeing it its hard to say what the problem might be. Please post a link to your page, update my test case or create your own test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

logan3043

Yes i'm using Scroller. Will i still be able to use BootStrap overflow on the datatable if i drop Scroller for FixedHeader? Also, how would i go about keeping the Search bar fixed as well?

Thanks for the help!

logan3043

I'm not including the Scroller with the download, but it's still not working and it's still creating a scroll bar when i choose to show 25 entries or more.

kthorngren

See if this thread helps:
https://datatables.net/forums/discussion/comment/145832/#Comment_145832

Specifically look for the comment with this example:
http://live.datatables.net/qaxejima/1/edit

Kevin

logan3043

Thank you. I think this is okay for now, i'll check that thread and see if it helps too.