Fixed Header

Fixed Header

HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0
    edited January 2019

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0
    edited February 2019

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0
    edited February 2019

    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
        });
    }
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0
    edited February 2019

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited February 2019

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

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

    Kevin

  • HueseniglobalHueseniglobal Posts: 27Questions: 9Answers: 0

    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

This discussion has been closed.