Ajax動態滾動載入資料

2022-08-05 17:21:19 字數 2022 閱讀 8864

更新核心滾動**：

$(window).scroll(function


()        }


});
首先，準備一個分頁的儲存過程：

create


procedure


proctest


@pagesize


int,


@pagenumber


intas


select


*from    ( select row_number()over (order


by userid)as rownum,c_name,user_email from ehrusers where c_name<>


'') 


asproducts


where   rownum between


@pagesize


*(@pagenumber


-1)+


1and


@pagesize


*@pagenumber


exec dbo.proctest 20, 1
接著，寫一個取資料的c#方法：

//


test


public


static datatable gettable(int pagesize, int


pagenum)


, ", pagesize, pagenum);


dataset ds =sqlhelper.executedataset(connstring.getconstring, commandtype.text, sql);


if (ds.tables.count > 0 && ds.tables[0].rows.count > 0


)            


else


}
ajax請求資料的邏輯，呼叫剛才的方法，返回json：

protected


void page_load(object


sender, eventargs e)


}
其中用到了一個aspx頁面作為controller。

接下來，就是比較重要的頁面和js**了：

頁面：

doctype html


>


<


html 


xmlns


="">


<


head


>


<


meta 


http-equiv


="content-type"


content


="text/html; charset=utf-8"


/>


<


title


>滾動測試


title


>


<


style


>


.maindiv 


.item 


.title 


.content 


style


>


<


script 


src="scripts/jquery-1.7.1.js"


>


script


>


head


>


<


body


>


<


h1>滾動測試


h1>


<


div 


class


="maindiv"


>


div>


body


>


html


>
js：

最終效果：


滾動前：






大功告成！