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 </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(); // bind data table on first page load
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindTopProductsTable); // bind data table on every UpdatePanel refresh
});
오류 내가 갖는 :
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' }
]
}
});
};
이 코드는 업데이트 패널을 처리 할 수있는 장소에 is :
정의되지 않은 참조 또는 null 참조의 속성 '스타일'을 가져올 수 없습니다.
이것은 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]",
은 당연히, 이것은 크롬에서 완벽하게 잘 작동 IE에서 불면.
템플릿에서 스타일 속성을 제거하면 어떻게됩니까? 작동한다면 어쩌면 클래스 (css)를 사용할 수 있습니다. 더 좋은 방법입니다 :). 그 사람들이 다시 IE를 헤이 와이어로 만들면 어쩌면 dataTables에 완료된 이벤트가있어서 원하는 CSS를 적용 할 수 있습니다. –
UpdatePanel에서 'Triggers' 섹션을 제거해보십시오. 'ChildrenAsTriggers'는 기본적으로'true'이므로'ddlProductsSector'는 이미 비동기 포스트 백 트리거입니다. – ConnorsFan
'add_endRequest' 대신'add_pageLoaded'를 사용하여'bindTopProductsTable' 이벤트 핸들러를 설정할 수도 있습니다. UpdatePanel이 새로 고침 될 때마다 실행됩니다. – ConnorsFan