Fixed header + complex header : alignment problem

MelodyNelson

Link to test case: https://live.datatables.net/tidamevu/5/edit?html,css,js,output
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

When I have multiple rows and colspan in the <thead> with Fixed header activated, there is a problem of alignment of the second line when I scroll the page.

The sentence is more complicated than the result, so I made a simple test case and add some screen captures :
https://live.datatables.net/tidamevu/5/edit?html,css,js,output

Before scrolling :

After scrolling

How can I fix the problem ?

Thank you

kthorngren

AFAIK FIxedHeader and complex headers are still not supported. See this thread. I believe Allan wants to post DT version 2 by the end of year.

Kevin

MelodyNelson

Thanks for the feedback Kevin.
I can live with it. It will be nice if something is planned in the future.

MelodyNelson

I'm searching for a solution to recreate this complex header using the dom options.

This is my actual table, the first line of the <thead> contains a lot a <span> with IDs and class because I put inside text and results coming from the footer callback.
You can see the result on the capture below the html (the line with the big arrow)

<thead> 
        <tr>
            <th colspan="13" class="txt-right smallcaps font1rem">
                total en-cours : <span id="head_total_en_cours"></span> <span id="head_count_total" class="parentheses fontw300"></span>
                <span class="indianred ml20">échues : </span> <span id="head_total_echues" class="indianred"></span> <span id="head_count_echues" class="parentheses fontw300 indianred"></span>
                <span class="olivedrab ml20">non échues : </span> <span id="head_total_non_echues" class="olivedrab"></span> <span id="head_count_non_echues" class="parentheses fontw300 olivedrab"></span>
            </th>
        </tr>
        <tr>
etc

If I don't want to break the header when scrolling, I must put all these infos outside the table but I want it just before.
So I was thinking of using dom options like in this example and put my « fake header » in the <div> in pink :

var table = new DataTable('#example', {
 //dom: 'PBlfrtip',
  dom: '<"#options_top.testStyle"PBfl><"#fake_header">tip',  
  searchPanes: {
        columns: [2, 1],
        cascadePanes: true
    }
});

Test case : https://live.datatables.net/xireqiqa/2/edit

How can I put all my HTML code inside my <div id="fake_header"> (the pink one) ?

allan

DataTables 2 (currently in development) brings a lot of improvements to complex headers, support for them in FixedHeader being one of them. I was working on that just last week in fact .

I expect DataTables 2 and the updates to the extensions that go with it, to drop early in the new year.

Allan

MelodyNelson

Thank you Allan, that's good news... I will wait for it

josefromeo

Does it worked or not

kthorngren

@josefromeo As the developer said support for complex headers with FixHeader will be in Datatables 2 which he expects to release at the beginning of the year.

Kevin

josefromeo

ok currently i am working on my site about Twitter an Should ii applyu the same ??

allan

This 99.9% looks like spam, but I'm willing to give the benefit of the doubt.

The answer is obviously no. The software is in development. You can't use it yet.

Allan