Fixed header on jquery datatables

is there no other ways to set fixed header on jquery datatables??

when i try using fixed header, there’s warning that fixed header 2 is not supported on scrolling datatables 🙁

does anyone knows how to fix that??

here is my scripts:

<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
    var oTable = $('#tabel_daftar_all').dataTable( {
        "bJQueryUI": true,
        "bPaginate": false,
        //"iDisplayLength": 5,
        //"aLengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
        //"iDisplayStart": 5,
        //"sPaginationType": "full_numbers",
        "sScrollX": "100%",
        //"sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bFilter": false
    } );    
    new FixedColumns( oTable, {
        "iLeftColumns": 4,
        "iLeftWidth": 350
    } );

    //new FixedHeader( oTable );
    //$('#tabel_daftar_all').dataTable().rowGrouping();
} );
</script>

Set multi header, frozen column and fixed header with jquery datatables

i have some question about jquery datatables here. my table is using multi header and the 4 first column is to be set frozen. i’ve 25 column in total, here’s is the example of my table: <table cell

jQuery DataTables fixedColumns remove fixed columns dynamically

I’m using fixedColumns plugin for my DataTables component. And I want to allow users to toggle fixed columns from the table header. Creating the fixed columns is straign forward: this.table.fixedColum

JQuery DataTables and onClick image in Header

I have a question mark inside the header of a table that uses JQuery Datatables. I tried disabling sorting (which isn’t ideal) but the onclick event wont fire for my image. Essentially DataTables hija

Jquery Datatables Multiple Header Issue

When I set my datatables to have multiple header rows, the swidth parameters that have been set are ignored. Is there any way of telling datatables that the header should be the second row rather than

Fixed Header jQuery Mobile

Is it possible to get fixed headers jQuery Mobile, with a row getting set in the top as in the link below? http://www.expedia.com.au/p/promos/Beach-Breaks.htm If you see the link above the header ima

jQuery Datatables Header Misaligned With Vertical Scrolling

I’ve posted this in the datatables.net forums, but after a week, still no response. Hopefully I can find help here… I’m using datatables version 1.8.1 and am having nightmares over column header ali

DataTables.net Scroller and Fixed Columns extension used together

I’m making some experiment with DataTables.net jQuery plugin. Did anybody use scroller extension together with fixed columns one? When I try to apply both extensions, only the header has fixed columns

jQuery DataTables checkboxes in Fixed Column

I’m using the jquery.datatables plugin along with the FixedColumns add-on and am experiencing some issues keeping the two tables in sync. The first 2 rows of my table contain checkboxes. Since the dat

jQuery scrollTo fixed header offset

I am using the jQuery scrollTo plugin as you can see on the page which I’m building http://portfolio.tomvervoort.net/ Because of the 300px fixed header the content moves under the header. You can see

need footer information in the header section in jQuery dataTables

I am using jQuery dataTables. Due to large number of records, I need footer information Showing 1 to 2 of 2 entries (filtered from 3352 total entries) in the header section after the Show Entries

Answers

Currently no, FixedHeader is not supported with scrolling – I’m sure its perfectly possible to add that functionality, but as of yet, I’ve not had time to do so! Couldn’t you just enable Y-scrolling? It achieves much the same effect, although its scrolling an inner element (which is already X-scrolling) rather than full page scrolling.

Remove the line

  "sScrollX": "100%",

and fixedheader will then work

For implementing Fixed header in jQuery Datatable, Please add “FixedHeader.min.js” in page header and add following code to page:

var oFH = new FixedHeader(oTable);
$('#tablename thead th:eq(0)').html('First column');
oFH.fnUpdate();

Hope this will help you.

First import the FixedHeader.js file 
<script type="text/javascript" charset="utf-8"    src="RELATIVE_PATH/fixedHeader.js">
</script> 

And then add following code to you html/ftl file
<script type="text/javascript">
         $(document).ready(function() {
     var table = $('#employeeDetails').DataTable();
    new $.fn.dataTable.FixedHeader( table );
} );
      </script>

..............Hope, This works fine.