筆者前一段時間在做項目時,由於項目需求要用到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改成替換