title: JQuery Datatables and ASP.NET UpdatePanel
body: <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>