溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關ajax中怎么實現無刷新分頁功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
html頁
<html>
<head>
<title></title>
<style type="text/css">
table{ border:solid 1px #444; background-color:Aqua;}
table td{border:solid 1px #444;}
</style>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var pageindex = 1;
var pagesize = 10;
/*如果將代碼封裝成一個函數，那么除非顯示調用(loaddata())，否則函數中的代碼不會執行
根據傳遞的頁碼和每頁顯示的記錄數量獲取數據
*/
function loaddata() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListAjax",
data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
success: function (result) {
//處理返回來的數據
var strtable = '<table>';
strtable += '<tr><td>編號</td><td>標題</td><td>內容</td><td>創建時間</td></tr>';
for (var i = 0; i < result.d.length; i++) {
strtable += '<tr>';
strtable += '<td>' + result.d[i].Id + '</td>';
strtable += '<td>' + result.d[i].NewsTitle + '</td>';
strtable += '<td>' + result.d[i].NewsContent + '</td>'
strtable += '<td>' + result.d[i].CreateTime + '</td>';
strtable += '</tr>';
}
strtable += '</table>';
$('#mydiv').html(strtable);
}
})
}
//根據傳遞到后臺的每頁顯示的記錄數量來獲取最大的頁碼(就是一共有多少頁)
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetLastPageindex",
data: "{pagesize:" + pagesize + "}",
success: function (result) {
lastpageindex = result.d;
}
})
//顯式調用函數，在頁面初次加載時加載第一頁數據
loaddata();
//下一頁
$('a:eq(2)').click(function () {
if (pageindex < lastpageindex) {
pageindex++;
loaddata();
}
})
//上一頁
$('a:eq(1)').click(function () {
if (pageindex > 1) {
pageindex--;
loaddata();
}
})
//第一頁
$('a:first').click(function () {
pageindex = 1;
loaddata();
})
//最后一頁
$('a:eq(3)').click(function () {
pageindex = lastpageindex;
loaddata();
})
$('a:last').click(function () {
pageindex = $('#txtPageindex').val();
loaddata();
})
})
</script>
</head>
<body>
<div id="mydiv">
</div>
<div><a href="#">第一頁</a><a href="#">上一頁</a><a href="#">下一頁</a><a href="#">最后一頁</a><input
id="txtPageindex" type="text" /><a href="#">Go</a></div>
</body>
</html>WebService1.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
namespace 分頁
{
/// <summary>
/// WebService1 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public List<Model.T_News1> GetListAjax(int pagesize,int pageindex)
{
BLL.T_News1 bnews = new BLL.T_News1();
DataTable dt = bnews.GetListDataTable(pagesize,pageindex);
List<Model.T_News1> list = new List<Model.T_News1>();
int Id;
string newstitle = "";
string newscontent = "";
DateTime createtime;
for (int i = 0; i < dt.Rows.Count; i++)
{
Id = Convert.ToInt32(dt.Rows[i]["Id"]);
newstitle = dt.Rows[i]["NewsTitle"].ToString();
newscontent = dt.Rows[i]["NewsContent"].ToString();
createtime = Convert.ToDateTime(dt.Rows[i]["CreateTime"]);
Model.T_News1 news = new Model.T_News1()
{
Id = Id,
NewsTitle = newstitle,
NewsContent = newscontent,
CreateTime = createtime
};
list.Add(news);
}
return list;
}
[WebMethod]
public int GetLastPageindex(int pagesize)
{
BLL.T_News1 bnews = new BLL.T_News1();
int totalcount = bnews.GetRecordCount("");
if (totalcount % pagesize == 0)
{
return totalcount / pagesize;
}
else
{
return totalcount / pagesize + 1;
}
}
}
}以上就是ajax中怎么實現無刷新分頁功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
