Fixed header + complex header : alignment problem

Fixed header + complex header : alignment problem

MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2
edited December 2023 in Free community support

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

Replies

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited December 2023

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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) ?

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

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

  • josefromeojosefromeo Posts: 2Questions: 0Answers: 0

    Does it worked or not

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    @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

  • josefromeojosefromeo Posts: 2Questions: 0Answers: 0
    edited December 2023

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

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    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

Sign In or Register to comment.