<asp:Repeater ID="Repeater1" runat="server" DataSourceID="LinqDataSource1">
        <HeaderTemplate>
            <div id="pgInfo">Page X of Z</div>
            <div id="Paging"><a href="javascript:void(0);" onclick="movePrevious()">Previous</a><div id="pageNumbers" style="display:inline"></div>
        <a href="javascript:void(0);" onclick="moveNext()">Next</a></div>
                
            <div id="dvRecords">
        
        </HeaderTemplate>
        <ItemTemplate>
            <div class="pageable" style="border:solid 1px blue;padding:2px;height:auto"><%#Eval("Product_Name") %><br /><%#Eval("Product_Detail") %></div>
        </ItemTemplate>
        <FooterTemplate>
        </div>
        <script>
            managePaging();
        </script>
        </FooterTemplate>
    </asp:Repeater>
    <asp:LinqDataSource ID="LinqDataSource1" runat="server"
        ContextTypeName="LearnWebApp.MyDbDataContext" TableName="Tbl_Products">
    </asp:LinqDataSource>

<script language="javascript">
    var pgPrefix = "pg"; // Thats is for Div id as we don't want to pass number in div Id
    var currPage = 1; // Index of the current page
    var recCount = 1; // record count, will be set by the functions
    var pgSize= 3; //this is the size of the page which can be changed according to the need
    var pgCount = 1; // page count, will be set by the functions
    function managePageIndex()
    {
        var strIndexText = "Page " + currPage + " of " + pgCount;
        document.getElementById("pgInfo").innerHTML = strIndexText;//in some cases you need to use textContent for mozila but that is rare.
    }
    function managePageNumbers()
    {
        var obj = document.getElementById("pageNumbers");
        obj.innerHTML = "";
        
        for (i=1;i<=pgCount;i++)
        {
            obj.innerHTML += "<a href='javascript:void(0);' onclick='showPage(" + i + ")'>" + i + "</a> ";
        }
        
    }
    function managePaging()
    {
        var obj = document.getElementById("dvRecords");
        var divs = obj.getElementsByTagName("div");
        
        
        for(i=0;i<=divs.length -1;i++)
        {
            if (recCount > pgSize)
            {
                pgCount++;
                recCount = 0;
            }
            
            var pgName = pgPrefix + pgCount; // Create div name as per current page
            if (divs[i].className != null && divs[i].className == "pageable")
            {
                divs[i].setAttribute("name",pgName);
            }
            recCount++;
        }
        managePageNumbers();
        showPage(currPage);
        
    }
    
    function showPage(pageNum)
    {
        var pgName = pgPrefix + pageNum;
        var obj = document.getElementById("dvRecords");
        var divs = obj.getElementsByTagName("div");
        currPage = pageNum;
        for(i=0;i<=divs.length -1;i++)
        {
            if (divs[i].getAttribute("name") == pgName)
            {
                divs[i].style.display = "block";
            }
            else
            {
                divs[i].style.display = "none";
            }
        }
        managePageIndex();
    }
function moveNext()
    {
        if ((currPage + 1) > pgCount)
        {
            currPage = 1;
        }
        else
        {
            currPage++;
        }
        showPage(currPage);
    }
    
    function movePrevious()
    {
        if ((currPage - 1) < 1)
        {
            currPage = pgCount;
        }
        else
        {
            currPage--;
        }
        
        showPage(currPage);
        
    }

    </script>