Duplicate header rows appear when using sScrollx option in datetable

kshitija

I have added following options to datatable
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true

There are duplicate header rows formed.The html structure formed includes one header formed with class name = "dataTables_scrollHead" and the other header row is formed inside dataTables_scrollBody > table > head

The jsfiddle link html code is provided : http://jsfiddle.net/Ne44E/

allan

This is correct operation for DataTables. The header has to be in the header and body containers in order to allow the column alignment to work. The second header (the one in the body) should be hidden. If it isn't please link to a test case showing the issue.

Allan

kshitija

The jsfiddle link for the above test case is : http://jsfiddle.net/pC2Qt/

allan

Your fiddle code just shows the output only, not the actual running code. I can't debug that.

Allan

kshitija

updated fiddle code for above test case : http://jsfiddle.net/pC2Qt/4/

valenpo

Alan, hi.

We have same issue for IE7 with 1.10 version. For some reason IE7 doesn't understand height: 0px; and duplication of headers appears on scroll body. I created some patch for this:

// Clone the current header and footer elements and then place it into the inner table
headerCopy = header.clone().prependTo( table );
headerTrgEls = header.find('tr'); // original header is in its own table
headerSrcEls = headerCopy.find('tr');
headerCopy.find('th, td').removeAttr('tabindex').empty();

you need empty any th, td and it will looks fine for IE7 too.

Regards,
Valentin

ibkliewer

valenpo,
If you do the empty, it distorts the table content so that the columns do not match with the header. You cannot even set the line-height or font-size which is what you need to do with IE7 or any of the compatibility modes.

Allan,
I created a fiddle for you, but, the issue is with IE7 and the compatibility modes. Many of my customers fall into one of these options. JSFiddle does not work at all in anything less than IE9, so a screenshot is the best I could do. When I bring up your example in IE7, it works fine. So, I took your style and used that and the issue was resolved. Kinda a bummer since my style has half the code and I don't have any really good idea what about the style could be the issue.

rboughani

When i use "sScrollX": "100" it work, but i try to define in % it dosnt work
What's the problem ?

rboughani

i have this error
Error: a.charCodeAt is not a function
q@http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js:106:447
Ua@http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js:106:4
ga@http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js:104:375
t@http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js:40:353
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js:151:317
.each@file:///W:/rafik/Template/jsext/jquery.min.js:2:2965
n.prototype.each@file:///W:/rafik/Template/jsext/jquery.min.js:2:836
i.fn.dataTable@http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js:139:179

allan

Link to a test case, as per the forums rules please.

Allan

loveMrStar

I also have this error Error

allan

@loveMrStar - As per my last post in this thread, please link to a test case so it can be debugged.

Allan

geam

Hi, I've got the same problème.
Like in the last provied fiddle (http://jsfiddle.net/pC2Qt/4/) the sort icone appear on the first row of the '.dataTables_scrollBody' .

In fact, the sorting icone is the one from the thead of the '.dataTables_scrollBody' that overflow and is shown on the first row.

I've edit the jquery.dataTables.js and correct the issue but I'm not that great in js and I don't know if the way I fix it is good (but at least it's fix).

To prevent the display of the icone, in the function _fnScrollDraw, juste before the

/*
 * 4. Clean up
 */

I add this line :

$(".dataTables_scrollBody th").removeAttr('class');

That way the measurment are good and the icone is not display (but I'm pretty sure there is a better to do it). Hope it could help debug.

Sorry if my english is bad, I tried my best.

Geam

Edit : OS, we can't preview what we type when editing comment

Antlion

Same issue

http://www.angrycrows.com/guilds

The 2nd header is not hidden for whatever reason.

geam

@Antlion

In a way less trash way that what I've done, you could do something like (if i've well understand, 'DataTables_Table_0' is the name of your table) :

$('#DataTables_Table_0').on( 'draw.dt' function() {
    $('.dataTables_scrollBody thead tr').addClass('hidden')
}

And do this in the init of your dataTable :

$('#DataTables_Table_0').DataTable( {
    [...], // this is the stuff you already do in init
    "initComplete" : function () {
        $('.dataTables_scrollBody thead tr').addClass('hidden');
    }
});

Guess that should do the tricks for you

allan

@Antlion - Your link appears to work okay for me. I don't see the duplicate header you mention. Do I need to use a specific browser?

Allan

mbinette

I've created a second simple fiddle for this at http://jsfiddle.net/sx18kpw7/

But, you can't test in fiddle because for the issue to come up, you have to be in IE with Emulation set to 5.

allan

IE with Emulation set to 5.

As in IE5?!

Who on earth still uses IE5?! :-). Many libraries don't support IE6, 7 or 8 now. I've seen some dropping IE9 support as well. DataTables currently requires IE6+. IE5 is absolutely not supported in any way.

DataTables 1.11 will drop support for IE6 and 7.

Allan

mbinette

I agree. What stinks is that any site that requires "Compatibility Mode" will drop all the way down to IE5 Document Mode as the default. You can cause the site to render in IE7 (or IE8,9,10,Edge) mode by adding the X-UA-Compatible header but not all sites are doing that.

I agree it shouldn't be fixed in DataTables. But for anyone who runs into the double header issue in IE, open Dev Tools, go to the Emulation tab, and see if changing the Document Mode makes a difference. If so, no reason to report it as a bug.

BanDon

Try this:

div.dataTables_scrollBody thead th { 
  vertical-align: top;
}

allan

Personally I feel that any site running in compatibility mode probably has bigger issues that a double header appearing ;-).

Allan

uchdadiyasandip

I have also facing this issue.when I used with bootstrap's css and js file,double header appear if I remove bootstrap's css and js,it works fine.

why this is happening ?my site is build on bootstrap.

uchdadiyasandip

here is my Datatable Debug bookmarklet results

http://debug.datatables.net/ozivuj

I also have problem in column alignment of header and body.

any idea how can I solve this issue ?

allan

@uchdadiyasandip - Can you use the latest version of the Bootstrap / DataTables integration CSS please.

Allan