The table id is lost when I user the 'scrollX' option

syj52417

Environment:
jquery:1.11.3
datatables:1.10.8
os:windows server 2003 sp2(too old ^=^)
ie6

It works well in other browsers,such as IE8+,firefox,chrome,the table id is ok.
Also,if I close the 'scrollX' option,the table id won't be lost in.

allan

IE6... oh goodie. I love IE6 bugs :-).

Are you checking the table element which is scrolling (i.e. the visible body of the table - not the header)?

Can you link to a page showing the issue please.

Allan

syj52417

First,I‘m sorry for being too busy to reply....

I seem to have found the source of the problem.I 'APPEND' a sentence of code(:alert(scroller[0].outerHTML)) on line 3765(DataTables 1.10.9).Then I got two different answers in IE6 and chrome.

IE6:

<div class=dataTables_scroll class="dataTables_scroll">
    <div class=dataTables_scrollHead class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
        <div class=dataTables_scrollHeadInner class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 100%;">
            <table width="100%" class="dataTable no-footer" role="grid" class="dataTable no-footer" style="margin-left: 0px;">
                <thead></thead>
            </table>
        </div>
    </div>
    <div class="dataTables_scrollBody" class=dataTables_scrollBody style="position: relative; overflow: auto; width: 100%;">
        <table id="" class="dataTable no-footer" role="grid">
            <tbody></tbody>
        </table>
    </div>
</div>

Chrome:

<div class="dataTables_scroll">
    <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
        <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 100%;">
            <table width="100%" class="dataTable no-footer" role="grid" style="margin-left: 0px;">
                <thead></thead>
            </table>
        </div>
    </div>
    <div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
        <table id="yTable" class="dataTable no-footer" role="grid">
            <tbody></tbody>
        </table>
    </div>
</div>

I think you can clearly see the table id is lost in IE6.I don't know why,but I suspect this might be jQuery's fault.

PS:English is not my native language,I hope you know what I mean,thanks!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Yes I can see the issue there. Might be worth trying jQuery 1.12.0? Does it happen for you on this example page in IE6 (I don't have my IE6 VM to hand at the moment to test it).

Allan

syj52417

In fact,the page can not show correctly in IE6...

Let's get back to the problem.I seem to have found the answer again.

On LINE 3746(DataTables 1.10.9)

headerClone.removeAttr('id')

Though
headerClone is the copy of table[0]

I found that table may excute the method of removeAttr in IE6 ,too.

headerClone changed, table changed,too.

So,the table id is lost.

Afterwards,I have tried many ways to solve the problem.

On LINE 3691 ,I modify the source code:

var headerClone = $( table[0].cloneNode(false).outerHTML );
var footerClone = $( table[0].cloneNode(false).outerHTML );

It works! I don't know why but feeling happy!Can you help me?Thank you! ^=^

allan

I've got a feeling I've run into that issue before and had forgotten about it. IE doesn't make a proper clone and changing the clone can effect the original.

I'm not willing to use outerHTML in DataTables core - if there is a different change that I might consider including it, but IE6 support is going to be removed completely from DataTables soon.

Allan

syj52417

Yeah, I entirely agree with you.

I try to solve the problem because of meeting it accidentally. There is no need to support IE6 in the long term.

Thanks!

boidy

I've just stumbled onto this post after scratching my head for the best part of 8 hours. I'm seeing a similar issue in that when I have scrollX enabled in DataTables, it removes the table id. This doesn't happen with scrollX disabled.

In my testing, I have added a class='col_searchable' to some <th> in order to build some column filters. I have then inserted the following above and below the DataTables initialisation:

console.log($(' thead th.col_searchable').parent().parent().parent());

The Console log shows the following:

[table#capture_job_table.table.table-striped.table-bordered.no-margin.text-xs, prevObject: jQuery.fn.init[1], context: document]
[table.table.table-striped.table-bordered.no-margin.text-xs.dataTable.no-footer, prevObject: jQuery.fn.init[1], context: document]

As you can see, the id 'capture_job_table' is present immediately before initialisation, but has been removed afterwards, and like I stated above, it doesn't have this behaviour when scrollX is disabled.

I'm using DataTables 1.10.12 and jQuery 2.1.1 and using Chrome browser Version 52.0.2743.116 m (64-bit).

allan

It doesn't remove the table id - the original table node is retained, with its id. But the table has to be split into three parts: header, body and footer. The body is the original element and if you "Inspect" it you will see it still has the id. The header is a clone and since the id can't be duplicated the id is removed from that.

Use column().header() if you need the header cell for a scrolling table.

Allan