How to implement paging with accordion in ASP.NET

See more:

C#

ASP.NET

I have accordion panel for project list. I have more than 100 entries. I implement 10 records using accordion pane with database. I need to add the paging at bottom of accordion pane which shows page number and each page fetch "Project list" from the database.

What I have tried:

<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>