Как реализовать разбиение на страницы с гармошкой в ASP.NET

---

У меня есть панель аккордеона для списка проектов. У меня есть более 100 записей. Я реализую 10 записей, используя панель аккордеона с базой данных. Мне нужно добавить подкачку в нижней части панели аккордеона, которая показывает номер страницы, и каждая страница извлекает "список проектов" из базы данных.

Что я уже пробовал:

<div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data Source=sandipv;Initial Catalog=Test;Integrated Security=True" 

            ProviderName="System.Data.SqlClient" SelectCommand="SELECT  
                    Id, Title, Decription, Agency, Supervisor,
                    TeamMember, StartDate, EndDate  FROM Project_Eng " />
        
        <ajaxToolkit:Accordion ID="MyAccordion" DataSourceID="sds1" runat="server" 

            SelectedIndex="-1" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" 

            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" 

            TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" 

            SuppressHeaderPostbacks="true" Width="900px" >
            
            <headertemplate><%#DataBinder.Eval(Container.DataItem, "Id")%>. 
                <%#DataBinder.Eval(Container.DataItem, "Title")%>

            <contenttemplate>
                
                <p style="font-family: Varela, sans-serif">Brief Profile:
                <%#DataBinder.Eval(Container.DataItem, "Decription")%></p>

                <p style="font-family: Varela, sans-serif">Funding Agency: 
                    <%#DataBinder.Eval(Container.DataItem, "Agency")%> 
                    
                </p>

                <p style="font-family: Varela, sans-serif">Principal Investigator:  
                    <%#DataBinder.Eval(Container.DataItem, "Supervisor")%> 
                    Team Members:  <%#DataBinder.Eval(Container.DataItem, "TeamMember")%>
                </p>

                

                <p style="font-family: Varela, sans-serif">Start Date:  
                    <%#DataBinder.Eval(Container.DataItem, "StartDate")%>  
                    End Date:  <%#DataBinder.Eval(Container.DataItem, "EndDate")%>
                </p>

                <p style="font-family: Varela, sans-serif">
                    
                </p>

                <p style="font-family: Varela, sans-serif">For further query
                    <a target="_top">Send Mail</a> 
                    
                </p>

             
            <panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                   
                    <%--//--- Content -----%>
                   
                
                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                    <%--//--- Heading -----%>
                    
                
                <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                    <%--//--- Heading -----%>
                    
                
                <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                    <%--//--- Heading -----%>
                    
                
            
        
    </div>

---