Error in loading data from database to gridview using ajax json C#

See more:

C#

ASP.NET

Javascript

Ajax

I'm trying to load data from database to `gridview` while scrolling page.It work like this

1)Intially when the page is loaded gridview display 10 data form the `database`(works fine)

2)while scrolling `gridview` display a image for loading and that time a server side function is called by using ajax `json` method for loading next 5 data from database

3)after successfully hitting this function the javascript removes the image for loading and appends the gridview with next 5 data.

Now the problem is after removing the image the gridview shows the first data from the database again and again in the gridview for the next 5 times . I have suspicion on onsucess function in my javascript code Please Help.

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        newscontainer.DataSource = GetNewsPageWise(1, 10);
        newscontainer.DataBind();
    }
}

public static DataSet GetNewsPageWise(int pageIndex, int pageSize)
{
    string constring = "server=***;uid=***;pwd=******;database=*******";
    using (SqlConnection con = new SqlConnection(constring))
    {
        using (SqlCommand cmd = new SqlCommand("[GetNewsPageWise]"))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds, "popnews");
                    DataTable dt = new DataTable("PageCount");
                    dt.Columns.Add("PageCount");
                    dt.Rows.Add();
                    dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
        }
    }
}
       
[WebMethod]
public static string GetCustomers(int pageIndex)
{
    //Added to similate delay so that we see the loader working
    //Must be removed when moving to production
    System.Threading.Thread.Sleep(2000);
    return GetNewsPageWise(pageIndex, 5).GetXml();
}

Javascript

<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(function () {
    //Remove the original GridView header
    $("[id$=newscontainer] tr").eq(0).remove();
});
//Load GridView Rows when DIV is scrolled
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        GetRecords();
    }
});
//Function to make AJAX call to the Web Method
function GetRecords() {
    pageIndex++;
    if (pageIndex == 2 || pageIndex <= pageCount) {

        //Show Loader
        if ($("[id$=newscontainer] .loader").length == 0) {
            var row = $("[id$=newscontainer] tr").eq(0).clone(true);
            row.addClass("loader");
            row.children().remove();
            row.append('<table><tbody><tr><td colspan="999" style="background-color:white"> <asp:Image ID="loader" runat="server" Height="50px" ImageUrl="~/Images/loader.gif" Width="51px" /></td></tr></tbody></table>');
            $("[id$=newscontainer]").append(row);
        }
        $.ajax({
            type: "POST",
            url: "News.aspx/GetCustomers",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }
}


 function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
    var customers = xml.find("popnews");
    $("[id$=newscontainer] .loader").remove();
    customers.each(function () {
        var customer = $(this);
        var row = $("[id$=newscontainer] tr").eq(0).clone(true);
        $(".postedon").html(customer.find("newsdate").text());
        $(".news").html(customer.find("news").text());
        $("[id$=newscontainer]").append(row);
    });

    //Hide Loader
    $("#loader").hide();
}

Stored Procedure Used

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[GetNewsPageWise]
@PageIndex INT = 1
,@PageSize INT = 10
,@PageCount INT OUTPUT
 AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER
(
   ORDER BY [newsid] ASC
 )AS RowNumber
   ,[newsid]
   ,[news]
  ,[newsdate]
    ,[newstime]
    INTO #Results
  FROM [popnews]

   DECLARE @RecordCount INT
    SELECT @RecordCount = COUNT(*) FROM #Results

 SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) /            
 CAST(@PageSize AS DECIMAL(10, 2)))
    PRINT       @PageCount

        SELECT * FROM #Results
       WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 
         AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1

      DROP TABLE #Results
         END