Datatable inside tab, header not on correct size until clicked

makoychan

Hi,

I have 2 tabs and placed 1 table for each tab. The other table's header is always not in correct size until i click it.

Is this a bug or i am missing something on my code?

colin

Hi @makoychan ,

It'll be something specific to your code. We're happy to take a look if you could link to a test case/page demonstrating the problem,

Cheers,

Colin

makoychan

<datatable>

        tblResult = $('#tblResult').DataTable({
            "serverSide": false,
            "processing": true,
            "ajax": {
                //"url": "/NonGCTViewer/DrawingViewer/SearchDrawings",
                "url": minURL + "/DrawingViewer/GetDrawingSets",
                "data": {
                    contractid: contractid,
                    drawingid: drawingId,
                    all: true,
                    line: '', structure: '', asbuilt: null,
                    mpfrom: null, mpto: null, contractnum: '', contracttitle: '',
                    drawingtitle: '', filenum: '', yearfrom: null, yearto: null,
                    disciplinelist: null
                }
            },
            "columns": [
                {
                    "className": 'dt-body-center',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                { "data": "DrawingTitle" },
                { "data": "ContractTitle" }, { "data": "DrawingNumber" }, { "data": "SortID" }, { "data": "SheetNumber" },
                { "data": "TotalSheets" }, { "data": "DrawingID" }, { "data": "FileName" }
            ],
            "columnDefs": [
                {
                    "targets": [0, 1, 4],
                    "render": function (data, type, row, meta) {
                        if (data == null) {
                            return data;
                        }

                        if (meta.col == 0) {
                            var oName = 'chk' + row.DrawingID
                            data = '<input type="checkbox" name="id[]" id="' + oName + '" title="' + row.FileName  + '" value="' + $('<div/>').text(data).html() + '">';
                        }
                        if (meta.col == 1) {
                            // data = data.replace(/,/gi, "<br>").replace(/^,/, "");
                            var command = "Reload('" +  row.DrawingTitle + "','" + row.ContractTitle + "','" + row.DrawingNumber + "','" + row.SheetNumber + "','" + row.FileName + "','" + row.ContractID + "'); return false;";
                            data = '<a href="#" onclick="' + command + '" data-toggle="tooltip" title="' + data + '" target="DocViewer" id="DrawingLink" ">' + data + '</a>'
                        }

                        if (meta.col == 4) {
                            if (row.SortID == "0")
                                data = '';
                        }

                        return data;
                    },

                },
             { "visible": false, "targets": [4,7,8] }],
            "language": {
            },
            "searching": false,
            "ordering": true,
            "paging": false,
            "fixedHeader": true,
            "scrollY": 200,
            "deferRender": true,
            "scroller": true,
            "info": false
        });


        tblResultReferences = $('#tblResultReferences').DataTable({
            "serverSide": false,
            "processing": true,
            "ajax": {
                //"url": "/NonGCTViewer/DrawingViewer/SearchDrawings",
                "url": minURL + "/DrawingViewer/GetDrawingReferences",
                "data": {
                    drawingid: drawingId
                }
            },
            "columns": [
                {
                    "className": 'dt-body-center',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                { "data": "RefName" },
                { "data": "FileNumber" }, { "data": "SheetNumber" }, { "data": "ContractNumber" },
                { "data": "drawingId" }, { "data": "FileName" }
            ],
            "columnDefs": [
                {
                    "targets": [0,1],
                    "render": function (data, type, row, meta) {
                        if (data == null) {
                            return data;
                        }

                        if (meta.col == 0) {
                            var oName = 'chkRef' + row.drawingId
                            data = '<input type="checkbox" name="id[]" id="' + oName + '" title="' + row.FileName + '" value="' + $('<div/>').text(data).html() + '">';
                        }

                        if (meta.col == 1) {
                            // data = data.replace(/,/gi, "<br>").replace(/^,/, "");
                            var command = "LoadReference('" + row.FileName + "','" + row.drawingId + "' ); return false;";
                            data = '<a href="#" onclick="' + command + '" data-toggle="tooltip" title="' + data + '" target="DocViewer" id="DrawingLink" ">' + data + '</a>'

                        }

                        return data;
                    },

                },
                { "visible": false, "targets": [5,6] }
            ],
            "language": {
            },
            "searching": false,
            "ordering": true,
            "paging": false,
            "fixedHeader": true,
            "scrollY": 200,
            "deferRender": true,
            "scroller": true,
            "info": false
        });

<function>
$("#dvTab").tabs();

<html>
<div id="dvFileContainter" class="form-inline required" style="height:30%;border-top:double; ">
<input type="button" value="Combine and download" onclick="DeferredTask()" />
<br />
<br />
<div id="dvTab">
<ul>
<li><a href="#sets" id="tabSets" onclick="SaveActiveTab(this)" >Drawing Sets</a></li>
<li><a href="#references" id="tabReferences" onclick="SaveActiveTab(this)">References</a></li>
</ul>

            <div id="sets" onclick="SaveActiveTab(this)">
                <div id="dvDrawingSet" style="height:200px">
                    @*  <input type="button" value="Combine and download" onclick="MergeAndDownload()" />*@
                    <table id="tblResult" class="display select" width="100%" style="margin:auto;">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="select_all" value="1" id="tblResult-select-all"></th>
                                <th>Drawing Title</th>
                                <th>Contract Title</th>
                                <th>Drawing Number</th>
                                <th>Sort Id</th>
                                <th>Sheet No</th>
                                <th>Total Sheet</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div id="references" onclick="SaveActiveTab(this)">
                <div id="dvDrawingReferences" style="height:200px">
                    @*  <input type="button" value="Combine and download" onclick="MergeAndDownload()" />*@
                    <table id="tblResultReferences" class="display select" style="margin:auto;width:100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="select_all" value="2" id="tblResultReferences-select-all"></th>
                                <th>Name</th>
                                <th>File Number</th>
                                <th>Sheet Number</th>
                                <th>Contract Number</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        </div>

colin

That's a lot of code to wade through. As I said before, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin