ajax中怎么实现无刷新分页功能
本篇文章给大家分享的是有关ajax中怎么实现无刷新分页功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
恩阳网站建设公司创新互联建站,恩阳网站设计制作，有大型网站制作公司丰富经验。已为恩阳1000+提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的恩阳做网站的公司定做！
html页
table{ border:solid 1px #444; background-color:Aqua;}
table td{border:solid 1px #444;}
$(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 = '';
strtable += '| 编号 | 标题 | 内容 | 创建时间 |
';
for (var i = 0; i < result.d.length; i++) {
strtable += '';
strtable += '| ' + result.d[i].Id + ' | ';
strtable += '' + result.d[i].NewsTitle + ' | ';
strtable += '' + result.d[i].NewsContent + ' | '
strtable += '' + result.d[i].CreateTime + ' | ';
strtable += '
';
}
strtable += '
';
$('#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();
})
})
WebService1.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
namespace 分页
{
///
/// WebService1 的摘要说明
///
[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 GetListAjax(int pagesize,int pageindex)
{
BLL.T_News1 bnews = new BLL.T_News1();
DataTable dt = bnews.GetListDataTable(pagesize,pageindex);
List list = new List();
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中怎么实现无刷新分页功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网页题目：ajax中怎么实现无刷新分页功能
新闻来源：
http://bjjierui.cn/article/ihjdhh.html
