jQuery Datatables ASP.NET問題

我正在使用C＃和JQuery Datatables構建報表儀表板。其中一個報告包含一個帶有下拉列表的更新面板。當用戶更改選擇時，數據將根據ddl選擇進行刷新。在每個塊內還有一個鏈接，使服務器端調用將數據導出到Excel。問題在於，在我單擊Excel導出鏈接後，下拉列表會丟失任何功能，就像其他Excel下載鏈接一樣。jQuery Datatables ASP.NET問題

這裏是我的代碼：

<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 
});

的錯誤我得到是：

無法獲取未定義或空引用的屬性'樣式'。

這是從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炸燬。

來源

2016-09-29 TrevorGoodchild

如果您刪除模板中的樣式屬性，該怎麼辦？如果它有效，也許你可以使用類（CSS），這是一個更好的方法:)。如果這些再次讓IE出問題，也許dataTables中有一個未完成的事件，可以讓你連接並讓你應用所需的CSS –

你可以嘗試從UpdatePanel中刪除'Triggers'節。由於'ChildrenAsTriggers'默認爲'true'，'ddlProductsSector'已經是一個異步回發觸發器。 – ConnorsFan

您也可以使用'add_pageLoaded'而不是'add_endRequest'來設置'bindTopProductsTable'事件處理程序。每次UpdatePanel刷新時它都會執行 – ConnorsFan

我想通了。事實證明，Sharepoint有一個標誌，可以防止某人單擊按鈕兩次。我添加了這個代碼：

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

現在它工作正常。

來源

2016-10-04 19:38:08 TrevorGoodchild

jQuery Datatables ASP.NET問題

回答

相關問題