OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

AJAX和三层架构实现分页功能具体思路及代码

2022-2-5 16:59| 发布者: 菜鸟教程小白| 查看: 242| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 本文涉及到AJAX和三层架构方面的知识，在学习分页的同时也巩固了一下它们的相关知识，适合初学者的你

 
-----------------------------HTMLPage1.htm--------------------------------- 
<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; 
var lastpageindex = 1; 
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; 
} 
}) 
//第一页 
$('a:first').click(function () { 
pageindex = 1; 
loaddata(); 
}) 
//上一页 
$('#divfenye a:eq(1)').click(function () { 
if (pageindex > 1) { 
pageindex--; 
loaddata(); 
} 
}) 
//下一页 
$('#divfenye a:eq(2)').click(function () { 
if (pageindex < lastpageindex) { 
pageindex++; 
loaddata(); 
} 
}) 
//最后一页 
$('#divfenye a:eq(3)').click(function () { 
pageindex = lastpageindex; 
loaddata(); 
}) 
$('#divfenye a:last').click(function () { 
pageindex = $('#txtPageindex').val(); 
loaddata(); 
}) 
$('#txtPageindex').focus(function () { 
$(this).val(''); 
}) 
}) 
</script> 
</head> 
<body> 
<div id="mydiv"> 
</div> 
<div id="divfenye"><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 -------------------------------- 
// 若要允许使用 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; 
} 
} 
------------------------------DAL层：-------------------------- 
/// <summary> 
/// 分页获取数据列表 
/// </summary> 
public DataTable GetListDataTable(int PageSize, int PageIndex) 
{ 
SqlParameter[] parameters = { 
new SqlParameter("@PageSize", SqlDbType.Int), 
new SqlParameter("@PageIndex", SqlDbType.Int) 
}; 
parameters[0].Value = PageSize; 
parameters[1].Value = PageIndex; 
return DbHelperSQL.RunProcedureDataTable("pro_fenye", parameters); 
} 
--------------------BLL层：-------------------------- 
public DataTable GetListDataTable(int pagesize, int pageindex) 
{ 
return dal.GetListDataTable(pagesize, pageindex); 
} 
------------------DbHelperSQL:----------------------- 
public static DataTable RunProcedureDataTable(string storedProcName, IDataParameter[] parameters) 
{ 
using (SqlConnection connection = new SqlConnection(connectionString)) 
{ 
DataTable dt = new DataTable(); 
connection.Open(); 
SqlDataAdapter sqlDA = new SqlDataAdapter(); 
sqlDA.SelectCommand = BuildQueryCommand(connection, storedProcName, parameters); 
sqlDA.Fill(dt); 
connection.Close(); 
return dt; 
} 
} 