title: Hide and show more rows of a datalist table using jQuery
body: <p>I have an asp datalist that is setup as follows:</p>
  
  <pre><code>&lt;asp:DataList ID="dlListItems" ClientIDMode="Static" Width="100%" runat="server" RepeatColumns="2" ItemStyle-BorderColor="#E8E6E7" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px"
          RepeatDirection="Horizontal" RepeatLayout="Table"&gt;
  </code></pre>
  
  <p>Within the datalist each node contains a a div with the class "divList"</p>
  
  <p>I need to be able to implement something so not all nodes are shown on load and a button to load more. No server side action needs to happen, simply the ability to show hidden rows.</p>
  
  <p>I have managed to get it working by hiding and then showing 10 divs at a time. Whilst this works well the table rows from the datalist are still shown and you therefore get a big gap of empty rows at the bottom of the datalist.</p>
  
  <pre><code> $(function () {
      $(".divList").slice(0, 10).show(); 
      $("#load").click(function (e) { 
          e.preventDefault();
          $(".divList:hidden").slice(0, 10).fadeIn(1500);          
      });
  });
  </code></pre>
  
  <p>Was hoping someone might have some suggestions on how I can implement this on the table rows rather than the divs in order to prevent the empty spacing within the datalist. Bearing in mind (as far as I know) I can't assign any id's classes to the datalist generated rows.</p>