title: Load more data when page scroll to bottom with DataList
body: <p>I would like to know what's wring with my code. What I want to do is when user scroll to the bottom of the page, more data will be load. I'm able to fetch data from database with the page size I set but when I scroll to bottom, it only loads empty data as the picture show.
  <a href="https://i.stack.imgur.com/eX5f3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eX5f3.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/BhL3u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BhL3u.png" alt="enter image description here"></a></p>
  
  <p>as the first image shows, I fetched those data but when I scroll to bottom, nothing it show.</p>
  
  <p>Below is my css and c# code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
      CodeBehind="Default.aspx.cs" Inherits="TestSite._Default" %&gt;
  
  &lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td&gt;
      &lt;div id="dvCustomers"&gt;
          &lt;asp:DataList ID="AllItem" runat="server"&gt;
              &lt;ItemTemplate&gt;
                  &lt;table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
                  border: dashed 2px #04AFEF; background-color: #B0E2F5"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;b&gt;&lt;u&gt;&lt;span class="Item_code"&gt;
                              &lt;%# Eval("Item_code")%&gt;&lt;/span&gt;&lt;/u&gt;&lt;/b&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br /&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:DataList&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var pageIndex = 1;
      var pageCount;
      $(window).scroll(function () {
          if ($(window).scrollTop() == $(document).height() - $(window).height()) {
              GetRecords();
          }
      });
      function GetRecords() {
          pageIndex++;
          if (pageIndex == 2 || pageIndex &lt;= pageCount) {
              $.ajax({
                  type: "POST",
                  url: "Default.aspx/GetItems",
                  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("Item");
          customers.each(function () {
              var customer = $(this);
              var table = $("#dvCustomers table").eq(0).clone(true);
              $(".Item_code", table).html(customer.find("Item_code").text());
              $("#dvCustomers").append(table).append("&lt;br /&gt;");
          });
      }
  &lt;/script&gt;
  &lt;/asp:Content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
          {
              AllItem.DataSource = LoadItems(1);
              AllItem.DataBind();
          }
      }
  
      [WebMethod]
      public static string GetItems(int pageIndex)
      {
          return LoadItems(pageIndex).GetXml();
      }
  
      public static DataSet LoadItems(int pageIndex)
      {
          string query = "[listing]";
          SqlCommand cmd = new SqlCommand(query);
          cmd.CommandType = CommandType.StoredProcedure;
          cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
          cmd.Parameters.AddWithValue("@PageSize", 12);
  
          cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
          return GetData(cmd);
      }
  
      private static DataSet GetData(SqlCommand cmd)
      {
          string strConnString = ConfigurationManager.ConnectionStrings["posConn"].ConnectionString;
          using (SqlConnection con = new SqlConnection(strConnString))
          {
              using (SqlDataAdapter sda = new SqlDataAdapter())
              {
                  cmd.Connection = con;
                  sda.SelectCommand = cmd;
                  using (DataSet ds = new DataSet())
                  {
                      sda.Fill(ds, "Item");
                      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;
                  }
              }
          }
      }
  </code></pre>
  
  <p>If you need additional information please let me know.
  Any suggestion will be much appreciate. Thank you</p>