ajax无刷新分页

前端之家收集整理的这篇文章主要介绍了ajax无刷新分页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

----html页-------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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相关文章