Secondary thead with sort icons?

Neekasa

Hello all,

I'm currently having an issue where there is a second on my table. It seems to only happen when using the "scrollX" property.
I'm using DataTables 1.10.0-beta.1 and the Bootstrap CSS addon as well as the fnReloadAjax plugin.


My Javascript Initialization
[code]
var oTable = $('#roster-dataTables').removeAttr('width').dataTable({
ajaxSource: "<?php echo $baseURL; ?>docs/rost/index.php?method=triggerFetch&did=<?php echo $_divisionInfo['id']; ?>&status="+status,
stateSave: true,
scrollY: "750px",
scrollX: true,
scrollCollapse: true,
paging: true,
columnDefs: [
{ width: 200, targets: [ 0, 1, 4, 8, 9, 11, 12, 14, 15, 16, 17 ] },
{ width: 50, targets: [ 2, 3, 5, 13 ] },
{ width: 150, targets: [ 6, 7, 10 ] },
{ orderable: false, targets: [ 2, 3, 4, 5, 6, 7, 10, 12, 13, 14, 15, 16, 17 ] }
],
lengthMenu: [ [10, 15, 20, 25, 50, 100, -1], [10, 15, 20, 25, 50, 100, "All"] ],
pageLength: -1
});
[/code]

My HTML
[code]




Forum Name


Game Name


A


R


Position


Tag


Join Date


Ori Date


First Name


Last Name


DOB


Email


Phone


Text


Address


Skype


Steam


Twitter




[/code]

Here is a screenshot of what is happening: http://prntscr.com/3e6xtm
Here is a screenshot of a snippet of the code from googles inspect: http://prntscr.com/3e6y27

I am unable to provide a link to the page as it has sensitive information on it and is protected by permissions, sorry! :(

Thanks for any help you can give,
Neeks

allan

I think we'd need a test case showing the issue - sorry. Which version of DataTables are you using? My guess is that there is padding on the cells which you'll need to remove.

Allan

Neekasa

Hello allan, thank you for responding ^^

I'm currently using DataTables 1.10.0-beta.1
I have also tried using the most up to date nightly build (1.10.0-rc.2.dev), but to no avail, it still shows the same issue.

I have removed the permissions for now just so you can see what is happening. You can find the page at: http://www.neekasa.com/pmsdocs-test2/Battlefield/PC/rost/

Thanks for your help,
Neeks

allan

Thank you for the link. The problem is the FontAwesome integration. You need to add something like:

[code]
div.dataTables_scrollBody thead th::after {
display:none;
}
[/code]

to your CSS.

It looks like you might be using a theme (sb-admin), so you might want to ask the authors of that theme to put this fix in, or for additional support if this doesn't fully fix it for you as it is not part of the DataTables software and not supported by myself.

Allan

Neekasa

Thank you for the help allan!

That fixed it 100%, and I will let those guys know that this needs to have a small fix in the theme too.

Thanks again,
Neeks