FixedHeader draw callback

MohammedAbdulMateen · March 2016

Is there any callback function that can be invoked after the FixedHeader has been inserted into the DOM. I am looking for an event like DOMNodeInserted but as this is not supported in old browsers, I need a callback function as I need to sync the scrollbars b/w the jquery dataTable and the FixedHeader.

MohammedAbdulMateen · March 2016

I am looking for a solution that works in IE8 and above

MohammedAbdulMateen · March 2016

This is what I've tried so far but I see a little flicker when I hide the scrollbar of the FixedHeader and no the scrollbar popups again if I open developer tools menu.

<body>
    <div class="container-fluid wrapper">
        <div style="height: 1000px; background-color: #DCDCDC;"></div>

        <table id="example"
               class="table table-bordered table-responsive table-striped my-fixed-header"
               style="display: block; overflow-x: scroll;">
            <thead>
                <tr>...</tr>
            <tbody>
                <tr>...</tr>
                <tr>...</tr>
           </tbody>
         </table>

        <div style="height: 1000px; background-color: #DCDCDC;"></div>
    </div>
    <script src="scripts/jquery-1.12.0.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script src="scripts/jquery.dataTables.js"></script>
    <script src="scripts/jquery.dataTables.columnFilter.js"></script>
    <script src="scripts/dataTables.fixedHeader.js"></script>
    <script type="text/javascript">
        "use strict";

        $(document).ready(function () {
            $('#example').DataTable({
                fixedHeader: true
            });

            $("#example").dataTable().columnFilter({
                sPlaceHolder: 'head:before',
                aoColumns: [
                    { type: "checkbox", values: ["Trident", "Gecko", "Webkit", "Presto", "KHTML", "Tasman", "Misc", "Other browsers"] },
                    { type: "checkbox", values: ["Internet Explorer 4.0", "Internet Explorer 5.0"] },
                    { type: "checkbox", values: ["Win 95+"] },
                    null, // if we don't want to apply column filter to this column set values as null
                    null
                ]
            });

            // #region FixedHeader and Scrolling

            $(window).on("scroll", windowScroll);
            $("#example").on("scroll", syncScrollbar);

            if ($(".fixedHeader-floating").length) {
                // hide the scrollbar if page reloads when FixedHeader is currently visible on the screen
                $(".fixedHeader-floating").css("overflow-x", "hidden");
            }

            function syncScrollbar(event) {
                console.log("sync scrollbar event");

                if ($(".fixedHeader-floating").length) {
                    // to prevent scrollbar visibility on browser zoom in/out
                    $(".fixedHeader-floating").css("overflow-x", "hidden");
                    var leftPosition = $("#example").scrollLeft();
                    $(".fixedHeader-floating").scrollLeft(leftPosition);
                }
            }

            function windowScroll(event) {
                console.log("window scroll event");

                if ($(".my-fixed-header").not("#example").length) {
                    $(".my-fixed-header").not("#example").css("overflow-x", "hidden");
                    // setTimeout function used to prevent incorrect scrollLeft value
                    setTimeout(function () {
                        syncScrollbar();
                    });
                }
            }

            // #endregion FixedHeader and Scrolling
        });
    </script>
</body>

FixedHeader draw callback

FixedHeader draw callback

Answers

Howdy, Stranger!

Categories

DataTables

FixedHeader draw callback

FixedHeader draw callback

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables