JQuery数据表和ASP.净UpdatePanel

Question

我在ASP的listview中使用JQuery数据表插件。. NET更新面板。对后端本身的调用正在工作，但我认为在调用之后需要重新绘制表，如何做到这一点是难倒的。

代码如下:

    <asp:DropDownList 
    ID="ddlSector" 
    AutoPostBack="true"
    EnableViewState="true" 
    OnSelectedIndexChanged="ddlSector_SelectedIndexChanged"
    runat="server" />
<asp:UpdatePanel ID="upTopProducts" UpdateMode="Always" runat="server">
<ContentTemplate>
 <asp:ListView
    ID="lvTopProducts"
    runat="server">
    <ItemTemplate>
        <tr style="padding-top: 5px; padding-bottom:5px;">
            <td><%# Eval("productId") %></td>
            <td><%# Eval("productDesc") %></td>
            <td style="text-align:right;"><%# Eval("quantity") %></td>
        </tr>
    </ItemTemplate>
    <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:center; border: none; padding-left: 0px;">Name</th>
                    <th style="text-align:center; 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>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="ddlSector" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

和Jquery:

       var topProductsTable = $('#tblTopProducts').dataTable(
            {
                "scrollY": "150px",
                "scrollCollapse": true,
                "bSort": false,
                "paging": false,
                dom: '<"toolbar">rt<"floatRight"B><"clear">',
                buttons: {
                    buttons: [
                        { extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true }
                    ]
                }
            });

Answer 1

我不确定这是否会解决你的问题，但我担心的是，当UpdatePanel刷新，由于ddlSector的AutoPostBack，是你会失去你的jQuery数据表。

你可以使用UpdatePanel的JavaScript API重新连接它:如何在更新面板刷新后运行一些javascript ?

你可能会有这样的代码:

$(function() {
    bindDataTable(); // bind data table on first page load
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); // bind data table on every UpdatePanel refresh
});
function bindDataTable() {
    var topProductsTable = $('#tblTopProducts').dataTable(
        {
            "scrollY": "150px",
            "scrollCollapse": true,
            "bSort": false,
            "paging": false,
            dom: '<"toolbar">rt<"floatRight"B><"clear">',
            buttons: {
                buttons: [
                    { extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true }
                ]
            }
        });
}

Answer 2

回调后需要调用$. datatables()，因为原来的表已经被销毁了。

   <ItemTemplate>
        <tr style="padding-top: 5px; padding-bottom:5px;">
            <td><%# Eval("productId") %></td>
            <td><%# Eval("productDesc") %></td>
            <td style="text-align:right;"><%# Eval("quantity") %></td>
        </tr>
    <script>
        var topProductsTable = $('#tblTopProducts').dataTable(
                                {
                                    "scrollY": "150px",
                                    "scrollCollapse": true,
                                    "bSort": false,
                                    "paging": false,
                                    dom: '<"toolbar">rt<"floatRight"B><"clear">',
                                    buttons: {
                                        buttons: [
                                            { extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true }
                                        ]
                                    }
                                });
                    </script>    
    </ItemTemplate>