DataTables.net在IE中发布

时间:2014-02-18 21:59:13

标签: internet-explorer jquery-datatables

如果我的标题错了,请原谅。我有一个Telerik RadWindow如下:

<Telerik:RadWindow ID="loanEditMultiplePopup" runat="server" Modal="true" VisibleStatusbar="false"
                    VisibleTitlebar="false" VisibleOnPageLoad="false" AutoSize="true">
                    <ContentTemplate>
                        <table id="tblEditMultiplePopup" class="withBorder" style="width: 900px; overflow: auto;
                            border: 0px;">
                            <thead>
                                <tr>
                                    <th>
                                        <table style="width: 100%; border: 0px;" class="withBorder">
                                            <tr>
                                                <th style="border: 0px;">
                                                    Edit Multiple Loans
                                                </th>
                                                <th style="border: 0px; text-align: right;"><a class="DockCmdCancel" style="display: inline-block; width: 20px;" title="Close"
                                                        onclick='PopupClose($find("<%=loanEditMultiplePopup.ClientID%>"));'></a>
                                                </th>
                                            </tr>
                                        </table>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <table id="tblLoanHeaderDetails" style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <input type='checkbox' name='All' value='All' onclick='CheckAllLoanHeaders(this);'>
                                                    </th>
                                                    <th>
                                                        Audit Number
                                                    </th>
                                                    <th>
                                                        Loan Number
                                                    </th>
                                                    <th>
                                                        Loan Status
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                    </td>
                                                    <td>
                                                    </td>
                                                    <td>
                                                    </td>
                                                    <td>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </ContentTemplate>
                </Telerik:RadWindow>

我在我的机器“appdev”中设置了一个虚拟目录。当我使用“http:localhost”和“http:appdev”访问应用程序时,我获得了不同的体验。例如,下面是我试图运行的javascript的简短版本。

var tblHtml = '<thead><tr><th><input name="All" onclick="CheckAllLoanHeaders(this);" type="checkbox" value="All"></th><th>Audit Number</th><th>Loan Number</th><th>Loan Status</th></tr></thead><tbody><tr><td><input name="chkLoanHeader_0" type="checkbox" value="129"></td><td>1213-POST-FHA-INT-1</td><td>112569549</td><td>In Progress</td></tr></tbody>';
$("#tblLoanHeaderDetails").html(tblHtml);
$("#tblLoanHeaderDetails").dataTable().fnDestroy(); //Remove the DataTables enhancements
$("#tblLoanHeaderDetails").dataTable({
                            "iDisplayLength": 25,
                            "bDestroy": true,
                            "aoColumns": [
                            /* checkbox */{"bSortable": false, "bSearchable": false, "bVisible": true },
                            /* Audit Number */{"bSortable": true, "bSearchable": true, "bVisible": true },
                            /* Loan Number */{"bSortable": true, "bSearchable": true, "bVisible": true },
                            /* Loan Status */{"bSortable": true, "bSearchable": true, "bVisible": true}],
                            "aaSorting": [[1, "asc"]]
                        });
radopen(null, "loanEditMultiplePopup");

如果我使用localhost运行,我会看到出现数据的弹出窗口。但是当我使用“appdev”时,它不会在弹出窗口中显示表格数据,实际上表格的html存在,但占用空间不可见。我在IE 11&amp; IE9和两者都没有用。我看到它出现在Chrome中。 来自“appdev”的检查内容

<div role="grid" id="tblLoanHeaderDetails_wrapper" class="dataTables_wrapper">
    <div id="tblLoanHeaderDetails_length" class="dataTables_length">
        <label>
            Show
            <select aria-controls="tblLoanHeaderDetails" size="1" name="tblLoanHeaderDetails_length"
                jquery1910027183463905366134="66">
                <option value="10">10</option>
                <option selected value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            entries</label></div>
    <div id="tblLoanHeaderDetails_filter" class="dataTables_filter">
        <label>
            Search:
            <input aria-controls="tblLoanHeaderDetails" jquery1910027183463905366134="62"></label></div>
    <table aria-describedby="tblLoanHeaderDetails_info" id="tblLoanHeaderDetails" class="dataTable"
        style="width: 0px">
        <thead>
            <tr role="row">
                <th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting_disabled"
                    style="width: 0px" tabindex="0" aria-label>
                    <input onclick="CheckAllLoanHeaders(this);" type="checkbox" value="All" name="All">
                </th>
                <th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting_asc"
                    style="width: 0px" tabindex="0" aria-sort="ascending" aria-label="Audit Number: activate to sort column descending"
                    jquery1910027183463905366134="74">
                    Audit Number
                </th>
                <th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting" style="width: 0px"
                    tabindex="0" aria-label="Loan Number: activate to sort column ascending" jquery1910027183463905366134="70">
                    Loan Number
                </th>
                <th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting" style="width: 0px"
                    tabindex="0" aria-label="Loan Status: activate to sort column ascending" jquery1910027183463905366134="59">
                    Loan Status
                </th>
            </tr>
        </thead>
        <tbody role="alert" aria-relevant="all" aria-live="polite">
            <tr class="odd" _dt_rowindex="0">
                <td class=" ">
                    <input type="checkbox" value="129" name="chkLoanHeader_0">
                </td>
                <td class="   sorting_1">
                    1213-POST-FHA-INT-1
                </td>
                <td class="  ">
                    112569549
                </td>
                <td class="  ">
                    In Progress
                </td>
            </tr>
        </tbody>
    </table>
    <div id="tblLoanHeaderDetails_info" class="dataTables_info">
        Showing 1 to 1 of 1 entries</div>
    <div id="tblLoanHeaderDetails_paginate" class="dataTables_paginate paging_two_button">
        <a role="button" tabindex="0" aria-controls="tblLoanHeaderDetails" id="tblLoanHeaderDetails_previous"
            class="paginate_disabled_previous" jquery1910027183463905366134="82">Previous</a><a
                role="button" tabindex="0" aria-controls="tblLoanHeaderDetails" id="tblLoanHeaderDetails_next"
                class="paginate_disabled_next" jquery1910027183463905366134="78">Next</a></div>
</div>

来自“localhost”的内容

<div class="dataTables_wrapper" id="tblLoanHeaderDetails_wrapper" role="grid">
    <div class="dataTables_length" id="tblLoanHeaderDetails_length">
        <label>
            Show
            <select name="tblLoanHeaderDetails_length" aria-controls="tblLoanHeaderDetails" size="1">
                <option value="10">10</option>
                <option selected="selected" value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            entries</label></div>
    <div class="dataTables_filter" id="tblLoanHeaderDetails_filter">
        <label>
            Search:
            <input aria-controls="tblLoanHeaderDetails" type="text"></label></div>
    <table class="dataTable" id="tblLoanHeaderDetails" aria-describedby="tblLoanHeaderDetails_info"
        style="width: 100px;">
        <thead>
            <tr role="row">
                <th tabindex="0" class="sorting_disabled" role="columnheader" aria-controls="tblLoanHeaderDetails"
                    style="width: 0px;" aria-label="" rowspan="1" colspan="1">
                    <input name="All" onclick="CheckAllLoanHeaders(this);" type="checkbox" value="All">
                </th>
                <th tabindex="0" class="sorting_asc" role="columnheader" aria-controls="tblLoanHeaderDetails"
                    style="width: 0px;" aria-label="Audit Number: activate to sort column descending"
                    aria-sort="ascending" rowspan="1" colspan="1">
                    Audit Number
                </th>
                <th tabindex="0" class="sorting" role="columnheader" aria-controls="tblLoanHeaderDetails"
                    style="width: 0px;" aria-label="Loan Number: activate to sort column ascending"
                    rowspan="1" colspan="1">
                    Loan Number
                </th>
                <th tabindex="0" class="sorting" role="columnheader" aria-controls="tblLoanHeaderDetails"
                    style="width: 0px;" aria-label="Loan Status: activate to sort column ascending"
                    rowspan="1" colspan="1">
                    Loan Status
                </th>
            </tr>
        </thead>
        <tbody role="alert" aria-live="polite" aria-relevant="all">
            <tr class="odd">
                <td class=" ">
                    <input name="chkLoanHeader_0" type="checkbox" value="129">
                </td>
                <td class="   sorting_1">
                    1213-POST-FHA-INT-1
                </td>
                <td class="  ">
                    112569549
                </td>
                <td class="  ">
                    In Progress
                </td>
            </tr>
        </tbody>
    </table>
    <div class="dataTables_info" id="tblLoanHeaderDetails_info">
        Showing 1 to 1 of 1 entries</div>
    <div class="dataTables_paginate paging_two_button" id="tblLoanHeaderDetails_paginate">
        <a tabindex="0" class="paginate_disabled_previous" id="tblLoanHeaderDetails_previous"
            role="button" aria-controls="tblLoanHeaderDetails">Previous</a><a tabindex="0" class="paginate_disabled_next"
                id="tblLoanHeaderDetails_next" role="button" aria-controls="tblLoanHeaderDetails">Next</a></div>
</div>

如果我评论$(“#tblLoanHeaderDetails”)。dataTable(...,表格正确显示(没有所有数据表的免费赠品)。

使用winmerge时唯一可见的区别是添加了jquery标签,例如“jquery1910027183463905366134 =”66“&gt;”对于appdev。我不知道那是什么。这是否使我的弹出窗口不可见?如果没有,那可能是什么问题?

1 个答案:

答案 0 :(得分:0)

啊!问题在于浮动。 对于dataTables_length,我删除了float:left并显示了它。

微软应该付我两天的时间。