使用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，因此它可以在客戶端動態更改（取決於控件的嵌套）。 所以我想這將是一個更好的方法。