ajax无刷新分页,ajax无刷新分页的简单实现

本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下

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();

})

})

第一页 上一页 下一页 最后一页

id="txtPageindex" type="text" />Go

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无刷新分页实现的关键代码，希望对大家的学习有所帮助。