Fixed Header

Hueseniglobal

Hello,

I am using Datatable JS with 1.10.18 and i want to use fixed header functionality so can you please let us know which version i need to download of fixed header js and css file. I have used 3.1.5 but didnt work

colin

Hi @Hueseniglobal ,

I think the current version of FixedHeader is 3.1.4, which should be working fine. If you're having a problem, we're happy to take a look, but it would help if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Hueseniglobal

Hello,Sorry for late reply

I am using datatable with below code and it works fine with paging filter and all.
(Check the image attached - Working_Without_error)
Code:

<script type="text/javascript">
        $(document).ready(function () {
            var table = $('.dataTables-example').DataTable({
                pageLength: 10,
                //scrollX: true, scrollY: 275, scrollX: true,
                "dom": '<"top"l<"gridttlEntried"i>>rt<"bottom"p><"clear">',
                initComplete: function () {
                    RebindInputSelect(table)
                }

            });
        });


        function RebindInputSelect(table) {
            $('.dataTables-example tfoot th').each(function   {
                    var title = $(this).text();
                    $(this).html('<input type="text" placeholder="" />');
            });

            var table = $('.dataTables-example').DataTable();

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });

            TopBottomScroll("Grid", 1);

            $('.spiner-example').hide();
        }
    </script>

Now i want to use "fixedHeader.min.js" with this table. As i will add js and css for this, my table goes massed while scroll down.(please check attached image - Error_With_Fixheader) Below is my code:

https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css
https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js

 $(document).ready(function () {
            var table = $('.dataTables-example').DataTable({
                pageLength: 10,
                //scrollX: true, scrollY: 275, scrollX: true,
                fixedHeader: true,
                "dom": '<"top"l<"gridttlEntried"i>>rt<"bottom"p><"clear">',
                initComplete: function () {
                    RebindInputSelect(table)
                }


            });
        });

        function RebindInputSelect(table) {
            $('#Grid tfoot th').each(function   {
                    var title = $(this).text();
                    $(this).html('<input type="text" placeholder="" />');
            });

            var table = $('#Grid').DataTable();

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });

            TopBottomScroll("Grid", 1);

            $('.spiner-example').hide();
        }

Please guide how to use this fixed header feature with top text box filter option on datatable.

colin

Hi @Hueseniglobal ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

See if this example of FixedHeader column searching helps:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

If not then please provide a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Hueseniglobal

As per our last conversion for real test, i created below link for test case
http://live.datatables.net/kegepicu/1/edit

In this example, input box comes in header but Its not working for fixheader,
Please note that as i change the css for table.dataTable tfoot to "display: table-footer-group;" then fixed header works fine but input box goes on footer which i dont want.

I want to use fixheader with input box come s in header. please check and guide

kthorngren

It doesn't look like you are following the FixedHeader Column Search example I linked to:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

You will need to follow this example to have the column searches in the FixedHeader. This is due to the way FixedHeader is structured. Please try changing your example to use this code.

Kevin

Hueseniglobal

Hello,

Thanks for the example. As your example works fine. I have checked it and it also work fine with me when i am using static data. But i am using data from server side to bind Datatable. So when i was trying to code with same way ;like you did but is not working. So can you pls give an example with server side data bind where Fix header works with search textbox on header and column visibility feature.

As i was tried with your way It did not comes with input text for filter. It shows two header, while its working with static data. Please guide me on this. If you want to check below is my code,
----------------My code--------------------

    table.dataTable tfoot {
    display: table-footer-group; 
  display: table-header-group; // on using this fixed header cant display

}

var table = $("#example").DataTable({

                "destroy": true,
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": true, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "pageLength": 25,
                "lengthMenu": [[10, 25, 50, 100, 150, 200], [10, 25, 50, 100, 150, 200]],
                rowId: 'CICO_Id',
                "order": [[0, "desc"]],
                fixedHeader: true,
              "dom": '<"html5buttons"B><"top"l<"gridttlEntried"i>>rt<"bottom"p><"clear">',
                buttons: [
                     {
                         extend: 'excel', exportOptions: { columns: ':visible' },
                         action: function (e, dt, button, config) {
                             window.location.href = "/controllername/action name";
                         }
                     },
                     {
                         extend: 'colvis', columns: ':not(.noVis)'
                     }
                ],

                "ajax": {
                    "url": "/controllername/action name",
                    "type": "POST",
                    "datatype": "json",
                    "data": {"paramere1": parameter1 for search },
                    "dataSrc": function (data) {
                        if (data.Result != undefined) {
                            alert(data.Result);
                            return;
                        }
                        data = data.data;
                        document.getElementById("lblRecordCount").innerHTML = data.length + " Record Found";
                        return data
                    }

                },

                "columnDefs":
                [
                {
                    "targets": [0],
                    "visible": false,
                    className: 'noVis'
                },
                {
                    "targets": [1,24],
                    "visible": true,
                    "searchable": false,
                    "orderable": false,
                    className: 'noVis'
                },
               initComplete: function () {
                    RebindInputSelect(table)
                }
});

function RebindInputSelect(table) {
        $('#example tfoot th').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="" />');
        });

        var table = $('#example ').DataTable();

        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

        table.column(22).visible(false); // this column is visible false when data load on search
        table.column(23).visible(false); // this column is visible false when data load on search

        TopBottomScroll("example ", 2);

        $('.wrapper2').on('scroll',function(){
            $('.fixedHeader-floating').scrollLeft($(this).scrollLeft()); // fixed header will be scroll on bottom scroll
        });
        
    }

function TopBottomScroll(gridID, AppendIndex) {
    $('<div/>', { class: "wrapper2" }).insertAfter('#' + gridID + '_wrapper div:eq(' + AppendIndex + ')').append($('#' + gridID));
    $('<div class="wrapper1"><div class="div1"></div></div>').insertAfter('#' + gridID + '_wrapper div:eq(' + AppendIndex + ')'); // this will create top scroll,

    $(".div1").css("width", $('#' + gridID).width()); // set top scroll width

    $(".wrapper1").scroll(function () { 
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft()); // bottom scroll will be scroll on top scroll
    });
    $(".wrapper2").scroll(function () {
        $(".wrapper1")
            .scrollLeft($(".wrapper2").scrollLeft()); // top scroll will be scroll on bottom scroll
    });
}

colin

As I said above, the best way to progress this would be to provide a test case that demonstrates the problem.

Cheers,

Colin

kthorngren

pls give an example with server side data bind where Fix header works with search textbox on header and column visibility feature.

Here is that example with server side processing, fixedcolums and hidden columns.
http://live.datatables.net/jubibehi/1/edit

Your above code snippet doesn't seem to use this code example as you are adding to the tfoot:
$('#example tfoot th').each(function (i) {

Please update or provide a test case replicating your issue so we can help.

Kevin

Hueseniglobal

Hello kthorngren

Thanks for the example. As your example works fine, but in your example grid was bind on page load and i need grid will bind on button search click, when i place your code on button search click on your example than searching was stopped.

http://live.datatables.net/jubibehi/4/edit

Please provide me example on button search click grid bind with search functionality.

kthorngren

You will need to move the code that creates the inputs into initComplete. Here is an example:
http://live.datatables.net/jubibehi/5/edit

Kevin

Hueseniglobal

Hello kthorngren

Thanks for the example. I seen your example, in this example there is searching problem when column is visible false, i start searching with salary and its giving data from date, i search in date and its giving office
Thanks in advance.

kthorngren

Sorry you are correct. Didn't test the solution completely

We need to get the actual column index using column().index(). This updated example should work:
http://live.datatables.net/lugenewa/1/edit

Kevin

Hueseniglobal

Hello kthorngren

Thanks for the example. i seen your example and everything is fine, i applied this code in my example, i can search data properly,

But my problem is when i typing fast than it cant take all typed word in input search, and when i press back space for remove search from input than going back in browser

Also input search taking default width when its bind, i want to apply width of column which i given,

And need to write any code in controller for search ? because i am writing "Request.Form.GetValues("columns[2][search][value]").FirstOrDefault();" for get value and filter from LINQ