Geek Answers Handbook

Hide and show more rows of datalist table using jQuery

I have an asp datalist that is configured 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">

Inside the datalist, each node contains a div with the class "divList"

I need to be able to implement something, so not all nodes are displayed at boot time and there is a button to load more. No server-side action should happen, just the ability to show hidden lines.

I managed to get it working by hiding and then showing 10 divs at a time. Although this works well, the table rows from the datalist are still shown, and therefore you get a large blank space at the bottom of the directories.

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

Was there in the hope that someone could have some suggestions on how I can implement this in the rows of the table, and not in the div, to prevent an empty distance inside the datalist. Considering (as far as I know), I cannot assign any id classes to the created data directories.

+4
source share
2 answers

You have to 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 all the rows of the table in your dlListItems hidden, and then get the trs that you want to show, since you do not want to show those rows that have hidden divs.

+2
source

try it

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

Since dlListItems is a dynamic control identifier, it can dynamically change on the client side (depending on the nesting of your controls). Therefore, I guess this will be the best approach.

+1
source

More articles:


All Articles