無限下拉的資料呈現 (類似FaceBook，分頁效果)#1 - jQuery + Web Service + Repeater控制項

類似臉書（FaceBook），您一直向下閱讀資訊。到了瀏覽器底部又會長出（呈現出）新的數據。

這也是一種「分頁」的技巧。參考網路上的範例，我改用SQL 2012的 OFFSET...FETCH 來做 （本文提供範例下載 & Youtube教學影片）

原始範例來源：
http://www.aspsnippets.com/Articles/Implement-Infinite-Scroll-Endless-Scroll-in-ASPNet-using-jQuery-AJAX.aspx 

您可以先到原網站看看 Demo效果。VB & C#範例都有。

原作者  使用 SQL 2005起的「資料分頁 - Row_Number」來做，

搭配 Repeater控制項 + Web Service + jQuery三者，算是一個整合範例。

簡單地說，流程如下：

    (1).  第一次執行時，展示十筆記錄。

    (2). 當您拉到網頁下方時，觸發 jQuery效果，以AJAX的方式跟Web Service查詢接下來的「後十筆」記錄，並在畫面上繪製表格。

        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                  // 您的程式......
            }
        });

    (3).  如此周而復始，就好像臉書（FaceBook）一樣，您一直向下閱讀，資料源源不絕，沒完沒了。

這些技巧以前都有分享過，請看：

................................................................................................................................................

• Web Service -- https://dotblogs.com.tw/mis2000lab/archive/2008/09/26/webservice_1.aspx
• 資料分頁 -- 以下兩個範例都有提供 Youtube教學影片

              SQL 2005的 Row_Number -- https://dotblogs.com.tw/mis2000lab/archive/2010/11/30/datareader_paging_row_number.aspx

              SQL 2012的 Offset...Fetch -- https://dotblogs.com.tw/mis2000lab/archive/2014/07/17/page_sql2012_fetch_offset_20140717.aspx

• jQuery + Web Service 互動範例 -- https://dotblogs.com.tw/mis2000lab/archive/2015/05/19/jquery_ajax_web_service.aspx

................................................................................................................................................

YouTuber教學影片  https://youtu.be/h5Zof9ZZRP4

  

我修改成 SQL 2012的資料分頁（ OFFSET...FETCH）作法，原理差不多。

 速度比起 ROW_Number差不多， 但比較起來，新的寫法比 ROW_Number省資源 

-----------------------------------------------------------------------------------------------------

首先，使用 Repeater控制項。

這東西比較單純，也不會產生過多的怪標籤。有利於後續搭配 jQuery大量複製 HTML表格（
）

畫面的部分，我沒有修正，您可以參閱原範例。

我主要修正後置程式碼 C# 的部分，不像原範例還需要一段SQL Server預存程序來做。

using System.Data;
using System.Data.SqlClient;
using System.Web.Services;  //*** Web Service 會用到 ***
using System.Web.Configuration;


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)  // 第一次執行
        {   // 自己寫的副程式，從第一頁開始。
            Repeater1.DataSource = MIS2000Lab_GetPageData(1);   
            Repeater1.DataBind();
        }
    }


    // ***** 分頁。使用SQL指令進行分頁 *****
    public static DataSet MIS2000Lab_GetPageData(int currentPage)
    {
        SqlConnection Conn = new SqlConnection("資料庫的連結字串");

        String SqlStr = "Select * from Customers ORDER BY [CustomerID] ASC ";
        SqlStr += " OFFSET @A ROWS FETCH NEXT 10 ROWS ONLY";
        // 為了配合前端的jQeury，這裡的第一頁不可以是"零"，需是一。程式改成 ((currentPage-1) * 10)
        //==SQL 2012 指令的 Offset...Fetch。參考資料： http://sharedderrick.blogspot.tw/2012/06/t-sql-offset-fetch.html  

        SqlDataAdapter myAdapter = new SqlDataAdapter(SqlStr, Conn);
        myAdapter.SelectCommand.Parameters.AddWithValue("@A", ((currentPage - 1) * 10));       
        DataSet ds = new DataSet();
        myAdapter.Fill(ds, "Customers");

        //-- 用來計算分頁的「總頁數」 ---      
        SqlCommand cmd = new SqlCommand("select Count(CustomerID) from Customers", Conn);
        Conn.Open();           
        int myTotalCount = (int)cmd.ExecuteScalar();

        DataTable dt = new DataTable("PageCount");
        dt.Columns.Add("PageCount");
        dt.Rows.Add();
        dt.Rows[0][0] = myTotalCount;
        ds.Tables.Add(dt);

        if (Conn.State == ConnectionState.Open)  {
            Conn.Close();
            Conn.Dispose();
        }

        return ds;
    }

    
    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        return MIS2000Lab_GetPageData(pageIndex).GetXml();
    }

因為要搭配前端的 jQuery，所以上述程式的「第一頁」，不寫成「0」而改成「1」。

您要修改 "前端" HTML畫面時，要注意幾點：

抱歉，因為程式碼貼上後，排版錯亂，只好貼圖！

或是來這裡，複製程式碼 -- http://mis2000lab.pixnet.net/blog/post/34529733-%E7%84%A1%E9%99%90%E4%B8%8B%E6%8B%89%E7%9A%84%E8%B3%87%E6%96%99%E5%91%88%E7%8F%BE%20(%E9%A1%9E%E4%BC%BCFaceBook%EF%BC%8C%E5%88%86%E9%A0%81%E6%95%88%E6%9E%9C)%20-%20jQuery%20+%20Web%20Service%20+%20Repeater%E6%8E%A7%E5%88%B6%E9%A0%85

分享，讓知識更加偉大  :-)

本範例請由此下載  https://onedrive.live.com/?id=6F7F668080F24B20%21678&cid=6F7F668080F24B20

檔名：

      [CS]無限下拉的Repeater_jQeury_WebService.rar

      [VB]無限下拉的Repeater_jQeury_WebService.rar

下一篇文章（相關範例）

無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁
https://dotblogs.com.tw/mis2000lab/2016/05/17/webform_infinite_scroll_endless_scroll_picture

相關文章：[讀書心得]資料分頁的最佳化，以SQL 2012的 OFFSET-FETCH為例

  

我將思想傳授他人， 他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net

................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................   Google+   https://plus.google.com/100202398389206570368/posts ........

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

下一篇文章：    http://mis2000lab.blogspot.tw/2016/12/facebook-2.html

無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁

http://mis2000lab.blogspot.tw/2016/12/facebook-2.html