JQuery Datatables和ASP.NET UpdatePanel

Question

我在ASP.NET更新面板中的listview上使用JQuery数据表插件.对后端本身的调用是有效的,但我认为在调用之后需要重新绘制该表,并且难以理解如何执行该操作.

这是代码:

    <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

我不确定这是否能解决您的问题,但我担心的一个问题是,由于ddlSector AutoPostBack,UpdatePanel刷新时会丢失您的jQuery DataTable.

您可以使用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 }
                ]
            }

        });
}