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

所属分类: 网络编程 / AJAX相关 阅读数: 939
收藏 0 赞 0 分享
复制代码 代码如下:

-----------------------------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;
}
}
更多精彩内容其他人还在看

ajax和jsonp跨域的原理本质详解

跨域问题是我们在开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于ajax和jsonp跨域的原理本质,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
收藏 0 赞 0 分享

ajax获取json数据为undefined原因分析

Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。这篇文章主要介绍了ajax获取json数据为undefined--原因,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

下面小编就为大家分享一篇ajax实现用户名校验的传统和jquery的$.post方式的实例讲解,具有很好的参考价值,希望对大家有所帮助
收藏 0 赞 0 分享

ajax中用josnp接收josn数据的实现方法

下面小编就为大家分享一篇ajax中用josnp接收josn数据的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ajax跨域获取网站json数据的实例

下面小编就为大家分享一篇ajax跨域获取网站json数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

关于前端ajax请求的优雅方案(http客户端为axios)

这篇文章主要给大家介绍了关于前端ajax请求的优雅方案,本文http客户端为axios,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
收藏 0 赞 0 分享

快速解决ajax请求出错状态码为0的问题

下面小编就为大家分享一篇快速解决ajax请求出错状态码为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ajax实现改变状态和删除无刷新的实例

下面小编就为大家分享一篇ajax实现改变状态和删除无刷新的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ajax结合mysql数据库和smarty实现局部数据状态的刷新方法

下面小编就为大家分享一篇ajax结合mysql数据库和smarty实现局部数据状态的刷新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Ajax客户端异步调用服务端的实现方法(js调用cs文件)

下面小编就为大家分享一篇Ajax客户端异步调用服务端的实现方法(js调用cs文件),具有很好的参考价值,希望对大家有所帮助
收藏 0 赞 0 分享
查看更多