Question

I have an asp datalist that is setup as follows:

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

Within the datalist each node contains a a div with the class “divList”

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.

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.

 $(function () {
    $(".divList").slice(0, 10).show(); 
    $("#load").click(function (e) { 
        e.preventDefault();
        $(".divList:hidden").slice(0, 10).fadeIn(1500);          
    });
});

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.

Answer 1

You should try this

$(function(){
    var trs =  $("#dlListItems tr");
    trs.hide();
    trs.slice(0, 10).show(); 
    $("#load").click(function (e) { 
        e.preventDefault();
        $("#dlListItems tr:hidden").slice(0, 10).fadeIn(1500);          
    });
});

First make your all Table rows in your dlListItems hidden, then get trs which you want to show as you don’t want to show those rows which have hidden divs.