jquery實現簡單翻頁


筆者前一段時間在做項目時,由於項目需求要用到jquery實現翻頁,遂自己專研了一種翻頁的方法,還希望大家指點。

做之前先寫思路,這是筆者的一個習慣。也可以幫助自己理清關系。

功能需求是:點擊“加載更多"實現數據在下面加載

1.頁面剛剛加載時通過ajax獲取首次綁定的數據

2.點擊加載更多后通過ajax獲取第二次加載的數據

3.把需要加載的數據循環追加在第一次后面

//num:每一頁需要加載信息的條數

// i:自加參數, i 默認為0

頁面剛剛加載前端代碼:

$.ajax({
type: "post",
url: "index/textAjax",
contentType: "application/json",
dataType: "json",
data: "{num:'" + 10+ "',i:'" + i+ "'}",
success: function (data) {
//頁面剛剛加載時輸出的數據
var Htmls = "";

for (var i = 0; i < data.length; i++) {

+"<div>"

+"<ul>"

+"<li>"

+data[i].name

+"</li>"

+"<li>"

+data[i].sex

+"</li>"

+"<li>"

+data[i].age

+"</li>"

+"</ul>"

+"</div>"

}

$("#cent").html(Htmls);
}

})

 

 

//點擊加載跟多后頁面顯示的數據,用jquery追加在第一次顯示信息的后面

//現將i的值加一

i=i+1;

$.ajax({
type: "post",
url: "index/textAjax",
contentType: "application/json",
dataType: "json",
data: "{num:'" + 10+ "',i:'" + i+ "'}",
success: function (data) { 
//頁面剛剛加載時輸出的數據
for (var i = 0; i < data.length; i++) {

$("#cent").appent(

+ "<div><ul>"

+"<li>"

+data[i].name

+"</li>"

+"<li>"

+data[i].sex

+"</li>"

+"<li>"

+data[i].age

+"</li>"

+"</ul></div>"

)

}

}

})

 

 

//后台方法:

[HttpPost]
public ActionResult textAjax(string num, string i)
{

if(i=0)

{

var data=select top num * from A ;

return Json(data);

}

else

{
var data=select top num * from A where id not in (select top num*i id from A)

return Json(data);

}

}

以上代碼就能實現一個簡單的jquery分頁,根據此邏輯也可以實現上一頁,下一個,首頁,最后一頁,只需把appent和remove改成替換


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM