使用jQuery隐藏和显示更多的datalist表行

Question

我有一个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的表行，因此您会在datalist底部获得大的空行间隙。

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

希望有人可能会对如何在表行而不是div上实现这一点提出一些建议，以防止数据列表中的空间距。请记住（据我所知）我不能将任何id的类分配给datalist生成的行。

Answer 1

你应该试试这个

$(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的行。

Answer 2

试试这个

$(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，因此它可以在客户端动态更改（取决于控件的嵌套）。所以我想这将是一个更好的方法。