Appending not working properly in lazy loading

251
November 23, 2016, at 6:08 PM

I'm having struggle with my code.I have a asp.net page like below.

<div id="div_goruntule" style="width:1217px;overflow:auto;height:200px;">
            <asp:GridView ID="gw1" CssClass="gridview1" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2"
                HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
                <Columns>       
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="datas" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="idcolumn" DataField="Id" HeaderText="Id" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="namecolumn" DataField="Name" HeaderText="Name" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="surnamecolumn" DataField="Surname" HeaderText="Surname" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="sexcolumn" DataField="Sex" HeaderText="Sex" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="emailcolumn" DataField="Email" HeaderText="Email" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="citycolumn" DataField="City" HeaderText="City" />
                    <asp:BoundField ItemStyle-Width="150px" ItemStyle-CssClass="agecolumn" DataField="Age" HeaderText="Age" />
                </Columns>
            </asp:GridView>
        </div>

Before getting record from database,I append 10 records to gridview.When user reached the bottom of the scrollbar,I'm supposed to load the next 10 record(11-20) with first 10 record.The problem is,when code trying to append second 10 record, first 10 records are deleted by itself.My related code is below.How can I correct this?

When page loaded,I call first 10 record like this:

var obj2 = {};
obj2.pageIndex = pageIndex;
obj2.pageSize = 10;
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "ShowRecord.aspx/fnc",
    data: JSON.stringify(obj2),
    dataType: "json",
    success: function (result) {
        $("#gw1").find("td").remove();
        for (var i = 0; i < result.d.length; i++) {
            $("#gw1").append("<tr>"
                + "<td id='options' style='width:150px;'>"
                + "<a href='#' id='edit" + (i + 1) + "' style='padding:0px 20px;'>Edit</a>"
                + "<a href='#' id='delete" + (i + 1) + "' style='padding:0px 20px;'>Delete</a></td>"
                + "<td style='width:150px;'>" + result.d[i].Id + "</td><td class='name' style='width:150px;'>" + result.d[i].Name
                + "</td><td style='width:150px;'>" + result.d[i].Surname + "</td><td class='sex' style='width:150px;'>" + result.d[i].Sex
                + "</td><td style='width:150px;'>" + result.d[i].Email + "</td><td class='city' style='width:150px;'>" + result.d[i].City
                + "</td><td style='width:150px;'>" + result.d[i].Age + "</td></tr>");
        }
    },
    error: function (xhr, status, error) {
        var err = eval("(" + xhr.responseText + ")");
        alert(err.Message);
    }
});

When scrolled:

$("#div_goruntule").bind("scroll", function (e) {
    var $o = $(e.currentTarget);
    if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
        printValues();
    }
});

and

function printValues() {
    pageIndex++;
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ShowRecord.aspx/GetRecords",
        data: '{pageIndex:' + pageIndex + '}',
        dataType: "json",
        success: function (result) {
            $("#gw1").find("td").remove();
            for (var i = 0; i < result.d.length; i++) {
                $("#gw1").append("<tr>"
                    + "<td id='options' style='width:150px;'>"
                    + "<a href='#' id='edit" + (i + 1) + "' style='padding:0px 20px;'>Edit</a>"
                    + "<a href='#' id='delete" + (i + 1) + "' style='padding:0px 20px;'>Delete</a></td>"
                    + "<td style='width:150px;'>" + result.d[i].Id + "</td><td class='name' style='width:150px;'>" + result.d[i].Name
                    + "</td><td style='width:150px;'>" + result.d[i].Surname + "</td><td class='sex' style='width:150px;'>" + result.d[i].Sex
                    + "</td><td style='width:150px;'>" + result.d[i].Email + "</td><td class='city' style='width:150px;'>" + result.d[i].City
                    + "</td><td style='width:150px;'>" + result.d[i].Age + "</td></tr>");
            }
        },
        error: function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        }
    });
}

fnc is below:

[System.Web.Services.WebMethod]
    public static ogrenci[] fnc(int pageIndex,int pageSize)
    {
        string text = "Data Source=YP202; Initial Catalog=Ogrenci; Integrated Security=true";
        DataTable dt = new DataTable();
        List<ogrenci> ogrList = new List<ogrenci>();
        using (SqlConnection con = new SqlConnection(text))
        {
            //string commandtext = "exec records5 @SayfadakiKayitSayisi,@SayfaNo";
            //using (SqlCommand command = new SqlCommand("select Id,Name,Surname,Sex,Email,City,Age from dbo.Student", con))
            using(SqlCommand command=new SqlCommand("[records5]"))
            {
                command.Connection = con;
                command.CommandType = CommandType.StoredProcedure;
                command.Parameters.AddWithValue("@SayfadakiKayitSayisi",10);
                command.Parameters.AddWithValue("@SayfaNo",pageIndex);
                SqlDataAdapter da = new SqlDataAdapter(command);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                    ogrenci ogr = new ogrenci();
                    ogr.Id = (int)dtrow["Id"];
                    ogr.Name = dtrow["Name"].ToString();
                    ogr.Surname = dtrow["Surname"].ToString();
                    ogr.Sex = dtrow["Sex"].ToString();
                    ogr.Email = dtrow["Email"].ToString();
                    ogr.City = dtrow["City"].ToString();
                    ogr.Age = (int)dtrow["Age"];
                    ogrList.Add(ogr);
                }
            }
        }
        return ogrList.ToArray();
    }
READ ALSO
Getting error - &ldquo;Argument &#39;myCtrl&#39; is not a function, got undefined&rdquo;

Getting error - “Argument 'myCtrl' is not a function, got undefined”

Unable to figure out where I am making a mistake. [nnn]Tried following this without any luck - [nnn]How to find a reason AngularJS "Argument 'MyCtrl' is not a function, got undefined".

278
In Jquery DataTable : How can I add text label in pagination

In Jquery DataTable : How can I add text label in pagination

I have used DataTable plugin to show the records. I would like to add text label in pagination instead of number buttons.

281
Issue getting CS:GO inventory

Issue getting CS:GO inventory

When using jQuery to try to get a steam users CS:GO inventory I get an error in the javascript console:.

250
Jquery Feed from Input

Jquery Feed from Input

I'm wondering if someone could show me how to grab the value of an input form and run it through J-query feed to finally dump it in a div. .

252