1. 程式人生 > >jquery 滾動條分頁載入資料

jquery 滾動條分頁載入資料

廢話不多說  直接擼

1.引入兩個js檔案,必須jquery第一個

<script src="jquery.min.js"/>
<script src="jquery.infinitescroll.min.js"/>

2.網頁頭寫一個指令碼

<script>
	$(document).ready(function (){  //啟動函式
		 $("#travel_list").infinitescroll({
			navSelector: "#pagenavi",//頁面分頁元素(成功後自動隱藏)
			nextSelector: "#pagenavi a",//下一頁的導航
			itemSelector: ".travel_single",//每次資料載入的地方
			//animate: true,//載入的時候是否需要動畫 預設false
			loading:{//載入資訊的顯示配置
				msgText:'<em>Loading the next set of posts...</em>'//預設載入資料時的提示資訊
			}
		 },function(e){
			$(document.body).limit();
		})
	}); 
</script>
3.網頁部分
<div class="travel_list" id="travel_list">
        <div class="travel_single">
                  內容.......省略(分頁的資料)
        <div>
         <div id="pagenavi" class="pagenavi">
                 <a href="請求地址?pageIndex=1"><a> //後臺獲取pageIndex,ok..... 大致流程結束
         </div>
<div>
專案中用到了,備註一下。也可以幫助到其他朋友