ajax页面不刷新的分页

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="无数新的分页.WebForm1" %>

<!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 runat="server">
<title></title>
<style type="text/css">
table{ border:solid 1px #444; background-color:Aqua; width:100%;height:80%;}
table td{border:solid 1px #444;}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var pagesize = 10;
var pageindex = 1;
function loaddata() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/shuju",
data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
success: function (result) {
//这里返回的result.d是一条记录,后面跟记录索引表示第几条记录,后面跟列名就可输出内容
var str = "<table>";
str += "<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>";
for (var i = 0; i < result.d.length; i++) {
str += "<tr>";
str += "<td>";
str += result.d[i]["Id"];
str += "</td>";
str += "<td>";
str += result.d[i]["NewsTitle"];
str += "</td>";
str += "<td>";
str += result.d[i]["NewsContent"];
str += "</td>";
str += "<td>";
str += result.d[i]["CreateTime"];
str += "</td>";
str += "</tr>";
}
str += "</table>";
$('#neirong').html(str);
}
})

}
loaddata();
//第一页
$('#caozuo a:eq(0)').click(function () {
pageindex = 1;
loaddata();
alert("第一页")
})
//上一页
$('#caozuo a:eq(1)').click(function () {
if (pageindex > 1) {
pageindex--;
loaddata();
alert("上一页")
}
})


//总页数
var z = 1;
//写个方法获取总页数
function zong(aaa) {
$.ajax({
type: "post",
url: "WebService1.asmx/maxindex",
data: "{pagesize:" + aaa + "}",
success: function (result) {
z = result.d;

}
})
}
zong(pagesize); //上面只是定义了但没有调用所以会出错,所以写完方法调用调用时参数要写在这里先
//下一页
$('#caozuo a:eq(2)').click(function () {//下一页这里需要获取总页数
if (pageindex < z) {
pageindex++;
loaddata();
alert("下一页")
}

})
//最后一页
$('#caozuo a:eq(3)').click(function () {
pageindex = z;
loaddata();
alert(z)
})
//go
$('#caozuo a:eq(4)').click(function () {
pageindex= $('#yema').val();
loaddata();
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="neirong">

</div>
<div id="caozuo">
<a href="#">第一页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">最后一页</a>
<input type="text" id="yema" />
<a href="#">go</a>
</div>
</form>
</body>
</html>

websevice:

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]
//这里model能直接点出来是因为命名空间名与项目名相同
public List<Model.T_News1> shuju(int pagesize,int pageindex)//传两个参数过来告诉要第几页的值多少这里只负责读出数据返回给前台
{
BLL.T_News1 bt = new BLL.T_News1();
DataTable dt = bt.GetListtable(pagesize,pageindex);
//这里声明变量
int id;
string title = "";
string content = "";
DateTime createtime;
List<Model.T_News1> list = new List<Model.T_News1>();
//通过循环给上面变量赋值
for (int i = 0; i < dt.Rows.Count; i++)
{
id = Convert.ToInt32(dt.Rows[i]["Id"]);
title = dt.Rows[i]["NewsTitle"].ToString();
content = dt.Rows[i]["NewsContent"].ToString();
createtime = Convert.ToDateTime(dt.Rows[i]["CreateTime"]);

//复制后加到实体中
Model.T_News1 shiti = new Model.T_News1()//对这个实体进行赋值
{
Id=id,
NewsTitle=title,
NewsContent=content,
CreateTime=createtime

};
list.Add(shiti);//最终将list给实体
}
return list;

} [WebMethod] public int maxindex(int pagesize) { BLL.T_News1 bt2 = new BLL.T_News1(); int totol= bt2.GetRecordCount(""); if (totol % pagesize == 0) { return totol / pagesize; } else { return totol / pagesize+1; } } } }

猜你在找的Ajax相关文章