iT邦幫忙

2

無限下拉的資料呈現 (另一種分頁) - jQuery + Web Service

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

這也是一種「分頁」的技巧。參考網路上的範例,我改用SQL 2012的 OFFSET...FETCH 來做
原始範例來源:
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)一樣,您一直向下閱讀,資料源源不絕,沒完沒了。

我修改成 SQL 2012的資料分頁( OFFSET...FETCH)作法,原理差不多。
速度比起 ROW_Number差不多, 但比較起來,新的寫法比 ROW_Number省資源

首先,使用 Repeater控制項。
這東西比較單純,也不會產生過多的怪標籤。有利於後續搭配 jQuery大量複製 HTML表格(<table>)
畫面的部分,我沒有修正,您可以參閱原範例。

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

因篇幅限制,程式碼請看 https://dotblogs.com.tw/mis2000lab/2016/02/23/webform_infinite_scroll_endless_scroll_jqeury_webservice


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言