jQuery Datatables ASP.NET问题

Question

我正在使用C#和JQuery Datatables构建报告仪表板。页面上的一个报告包含一个带有下拉列表的更新面板。当用户更改选择时，数据会根据ddl选择刷新。在每个块内部还有一个链接，该链接会对服务器进行调用以导出数据到Excel。问题是，在我单击Excel导出链接后，下拉列表失去了任何功能，其他Excel下载链接也一样失效。

以下是我的代码：

<div id="dTopProducts" class="dashboardDiv" style="height:400px; width:485px; margin-top: 15px; margin-bottom:15px; margin-right: 15px;" runat="server">

    <asp:UpdatePanel ID="upProducts" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlProductsSector" EventName="SelectedIndexChanged" />
        </Triggers>
        <ContentTemplate>

            <div style="float: left;">
                <h2>Top Products&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
            </div>

            <div style="float: left; ">
                <asp:DropDownList
                    ID="ddlProductsSector"
                    AutoPostBack="true"
                    EnableViewState="true"
                    OnSelectedIndexChanged="ddlProductsSector_SelectedIndexChanged"
                    runat="server" />
            </div>

            <asp:UpdateProgress ID="prgProducts" AssociatedUpdatePanelID="upProducts" runat="server">
                <ProgressTemplate>
                    <epriLoader:Loader runat="server" />
                </ProgressTemplate>
            </asp:UpdateProgress>

            <asp:ListView
                ID="lvTopProducts"
                runat="server">

                <ItemTemplate>
                    <tr style="padding-top: 5px; padding-bottom: 5px;">
                        <td style="padding-left: 0px;"><%# Eval("productId") %></td>
                        <td><%# Eval("productDesc") %></td>
                        <td style="text-align: right;"><%# Eval("quantity") %></td>
                    </tr>
                </ItemTemplate>

                <EmptyDataTemplate>
                    <div style="float: left; padding-top: 25px;">
                        There are no product records found for the criteria provided
                    </div>
                </EmptyDataTemplate>

                <LayoutTemplate>
                    <table id="tblTopProducts" style="width: 100%">

                        <thead>
                            <tr style="padding-bottom: 10px; border: none;">
                                <th style="text-align: left; border: none; padding-left: 0px;">ID</th>
                                <th style="text-align: left; border: none; padding-left: 0px;">Name</th>
                                <th style="text-align: right; border: none;">Quantity</th>
                            </tr>
                        </thead>

                        <tfoot>
                            <tr>
                                <td style="border: none;"></td>
                                <td style="border: none;"></td>
                                <td style="border: none;"></td>
                            </tr>
                        </tfoot>

                        <tbody runat="server">
                            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                        </tbody>

                    </table>
                </LayoutTemplate>
            </asp:ListView>

        </ContentTemplate>
    </asp:UpdatePanel>

    <%--Link that calls full export from funding page--%>
    <a id="aTopProducts" class="invoicesLink" title="Click here to download full report" onserverclick="ExportTopProductsToExcel" runat="server">Download full Report</a>
</div>

以下是 jQuery 代码：

function bindTopProductsTable() {

    var topProductsTable = $('#tblTopProducts').dataTable(
        {
            "scrollY": "225px",
            "scrollCollapse": true,

            "bSort": true,
            "order": [[2, "desc"]],
            "paging": false,

            dom: '<"toolbar">rt<"floatRight"B><"clear">',

            buttons: {
                buttons: [
                    { extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true, className: 'productsExportButton' }
                ]
            }

        });

};

这段代码用于处理更新面板：

$(function () {
    bindTopProductsTable(); // bind data table on first page load

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindTopProductsTable); // bind data table on every UpdatePanel refresh
});

我得到的错误是：

无法获取未定义或空引用的 'style' 属性。

这是来自 IE JS 调试器的完整错误：

j.find("thead, tfoot").remove();j.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());j.find("tfoot th, tfoot td").css("width","");n=qa(a,j.find("thead")[0]);for(m=0;m<i.length;m++)o=c[i[m]],n[m].style.width=null!==o.sWidthOrig&&""!==o.sWidthOrig?x(o.sWidthOrig):"",o.sWidthOrig&&f&&h(n[m]).append(h("<div/>").css({width:o.sWidthOrig,margin:0,padding:0,border:0,height:1}));if(a.aoData.length)for(m=0;m<i.length;m++)t=i[m],o=c[t],h(Gb(a,t)).clone(!1).append(o.sContentPadding).appendTo(r);h("[name]",

毫不意外，这在Chrome中可以完美运行，在IE中则会崩溃。

- TrevorGoodchild

---

如果您从模板中删除样式属性，会发生什么呢？如果可以正常工作，也许您可以使用类（CSS），这是更好的方法：）。如果这些再次让IE失控，那么在dataTables中可能有一个oncompleted事件，可以帮助您应用所需的CSS。 - Bert Persyn

您可以尝试从UpdatePanel中删除“Triggers”部分。由于默认情况下“ChildrenAsTriggers”为true，因此“ddlProductsSector”已经是异步回发触发器。 - ConnorsFan

您也可以使用add_pageLoaded而非add_endRequest来设置bindTopProductsTable事件处理程序。这样它将在每次刷新UpdatePanel时执行。 - ConnorsFan

触发器已被移除，但没有起作用。尝试将其添加到更新面板中，但也没有起作用。我忘了提到这是在Sharepoint webpart中，我认为在初始提交后页面会出现一些问题。 - TrevorGoodchild

搞定了，在这里找到了答案：https://dev59.com/8eo6XIcBkEYKwwoYSCc1 - TrevorGoodchild

Answer 1

我搞清楚了。原来Sharepoint有一个标记可以防止用户重复点击按钮。我添加了以下代码：

function setFormSubmitToFalse() {
    setTimeout(function () { _spFormOnSubmitCalled = false; }, 3000);
    return true;
}

现在它可以正常工作了。

- TrevorGoodchild