JQuery Datatables and ASP.NET UpdatePanel
<p>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.  </p>

<p>Here's the code:</p>

<pre><code>    &lt;asp:DropDownList 
    ID="ddlSector" 
    AutoPostBack="true"
    EnableViewState="true" 
    OnSelectedIndexChanged="ddlSector_SelectedIndexChanged"
    runat="server" /&gt;

&lt;asp:UpdatePanel ID="upTopProducts" UpdateMode="Always" runat="server"&gt;

&lt;ContentTemplate&gt;

 &lt;asp:ListView
    ID="lvTopProducts"
    runat="server"&gt;

    &lt;ItemTemplate&gt;
        &lt;tr style="padding-top: 5px; padding-bottom:5px;"&gt;
            &lt;td&gt;&lt;%# Eval("productId") %&gt;&lt;/td&gt;
            &lt;td&gt;&lt;%# Eval("productDesc") %&gt;&lt;/td&gt;
            &lt;td style="text-align:right;"&gt;&lt;%# Eval("quantity") %&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ItemTemplate&gt;

    &lt;LayoutTemplate&gt;
        &lt;table ID="tblTopProducts" style="width: 100%"&gt;

             &lt;thead&gt;
                &lt;tr style="padding-bottom: 10px; border: none;"&gt;
                    &lt;th style="text-align:left; border: none; padding-left: 0px;"&gt;ID&lt;/th&gt;
                    &lt;th style="text-align:center; border: none; padding-left: 0px;"&gt;Name&lt;/th&gt;
                    &lt;th style="text-align:center; border: none;"&gt;Quantity&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;

            &lt;tfoot&gt;
                &lt;tr&gt;
                    &lt;td style="border: none;"&gt;&lt;/td&gt;
                    &lt;td style="border: none;"&gt;&lt;/td&gt;
                    &lt;td style="border: none;"&gt;&lt;/td&gt;
                &lt;/tr&gt;          
            &lt;/tfoot&gt;

            &lt;tbody runat="server"&gt;
                &lt;asp:PlaceHolder ID="itemPlaceholder" runat="server" /&gt;
            &lt;/tbody&gt;

        &lt;/table&gt;                            
    &lt;/LayoutTemplate&gt;          
&lt;/asp:ListView&gt;

&lt;/ContentTemplate&gt;

&lt;Triggers&gt;
    &lt;asp:AsyncPostBackTrigger ControlID="ddlSector" EventName="SelectedIndexChanged" /&gt;
&lt;/Triggers&gt;
&lt;/asp:UpdatePanel&gt;
</code></pre>

<p>and the Jquery:</p>

<pre><code>       var topProductsTable = $('#tblTopProducts').dataTable(
            {
                "scrollY": "150px",
                "scrollCollapse": true,
                "bSort": false,
                "paging": false,

                dom: '&lt;"toolbar"&gt;rt&lt;"floatRight"B&gt;&lt;"clear"&gt;',

                buttons: {
                    buttons: [
                        { extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true }
                    ]
                }

            });
</code></pre>