我有一个asp datalist,设置如下:
<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">
在datalist中,每个节点都包含一个带有“divList”类的div
我需要能够实现某些功能,因此并非所有节点都在加载时显示,而按钮则需要加载更多。不需要发生服务器端操作,只需显示隐藏的行。
我已经设法通过隐藏然后一次显示10个div来使其工作。虽然这很好用,但仍会显示来自datalist的表格行,因此您会在数据列表的底部获得空行的大间隙。
$(function () {
$(".divList").slice(0, 10).show();
$("#load").click(function (e) {
e.preventDefault();
$(".divList:hidden").slice(0, 10).fadeIn(1500);
});
});
希望有人可能会对如何在表行而不是div上实现这一点提出一些建议,以防止数据列表中的空间距。请记住(据我所知)我不能将任何id的类分配给datalist生成的行。
答案 0 :(得分:2)
你应该试试这个
$(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);
});
});
首先隐藏dlListItems中的所有Table行,然后获取要显示的trs,因为您不希望显示那些隐藏div的行。
答案 1 :(得分:1)
试试这个
$(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);
});
});
由于dlListItems
是动态控件的ID,它可以在客户端动态更改(取决于控件的嵌套)。所以我想这将是一个更好的方法。