JQuery Datatables and ASP.NET UpdatePanel

Question

I'm using the JQuery datatables plug in on a listview within an ASP.NET update panel. The call to the back end itself is working, but I think the table needs to be redrawn after the call, stumped on how to to that.

Here's the code:

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

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

I'm not sure if this will solve your problem, but one concern I would have is when the UpdatePanel refreshes, due to ddlSector's AutoPostBack, is that you will lose your jQuery DataTable.

You can reconnect it by using the UpdatePanel's JavaScript API: How can I run some javascript after an update panel refreshes?

So you might have some code like this:

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

You need call $.dataTables() after callback, because the original table has destroyed.

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