Как я могу сделать ячейки ASP 'datalist' расширяемыми / складывающимися?

Question

У меня есть осина DataList который заполняется DataTable,

<asp:PlaceHolder ID="ph3" runat="server">
    <asp:DataList ID="dlspec" runat="server" GridLines="Vertical" OnItemDataBound="dlspec_ItemDataBound">
        <FooterStyle BackColor="#CCCCCC" />
        <AlternatingItemStyle CssClass="alt-grey" />
        <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
        <ItemTemplate>
            <table width="320px">
                <tr>
                    <td class="leftcol">
                        <asp:Label ID="lblDimension" runat="server" Text='<%# Eval("Dimension") %>'></asp:Label>:
                    </td>
                    <td class="ProductDetailData">
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Attribute") %>'></asp:Label>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList> 
</asp:placeholder>

Проблема в том, что мне нужно отобразить только первые 5 элементов в списке данных, и мне нужно скрыть остальные ячейки и сделать их "расширяемыми" по запросу. Как я могу добиться этого в элементе управления DataList? Я знаю, что есть плагины JQuery, которые я могу использовать против определенного тега "div" для достижения этой цели, но я не знаю, как я могу сделать это в "элементе управления DataList".

Скоро понадобится помощь по этому вопросу. Цените все ваши ценные советы.

Answer 1

Что вам нужно, это нумерация страниц. Вот статья, которая показывает вам, как это сделать.

Обновление: для выполнения этой клиентской стороны с jQuery посмотрите здесь. В основном добавьте класс к таблице в ItemTemplate и ссылку Show more и добавьте код javascript где-нибудь на странице.

Здесь добавляется скрипт jQuery (предполагается, что row - это ваш класс элементов, а showMore - это ссылка, которая показывает больше элементов, в данном случае все они для простоты):

$(function() {
    $(".row").slice(2).hide();

    $("#showMore").click(function() {
        $(".row").show();
    });
});

В дальнейшем вы можете поиграть с функцией slice(), чтобы добавить более интересное поведение.

Обратите внимание, что если ваша страница работает медленно, пользователи увидят всю таблицу, а когда страница будет загружена, большинство строк в списке исчезнет. Чтобы избежать этого, выполняйте JavaScript сразу после рендеринга списка данных.