Vấn đề jQuery Datatables ASP.NET

Question

Tôi đang xây dựng một bảng điều khiển báo cáo bằng cách sử dụng C# và JQuery Datatables. Một trong các báo cáo trên trang chứa bảng cập nhật có danh sách thả xuống. Khi người dùng thay đổi lựa chọn, dữ liệu sẽ làm mới dựa trên lựa chọn ddl. Trong mỗi khối cũng có một liên kết mà làm cho một cuộc gọi phía máy chủ để xuất dữ liệu sang Excel. Vấn đề là sau khi tôi nhấp vào liên kết xuất Excel, danh sách thả xuống sẽ mất bất kỳ chức năng nào, cũng như các liên kết tải xuống Excel khác.

Dưới đây là mã của tôi:

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

Đây là 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' } 
       ] 
      } 

     }); 

}; 

Mã này được đặt ra để xử lý các bảng cập nhật:

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

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

Các lỗi tôi nhận được là:

Không thể lấy thuộc tính 'style' của tham chiếu không xác định hoặc null.

Đây là lỗi đầy đủ từ debugger 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]", 

Không ngạc nhiên, công trình này hoàn toàn tốt đẹp trong Chrome, thổi lên trong IE.

Answer 1

Tôi đã tìm ra. Hóa ra Sharepoint có một lá cờ để ngăn người khác bấm vào một nút hai lần. Tôi đã thêm mã này:

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

và bây giờ nó hoạt động tốt.