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;

}

}

时间： 2024-11-05 19:39:42

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

AJAX和三层架构实现分页功能具体思路及代码的相关文章

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

android 类似微信的摇一摇功能实现思路及代码_Android

android 类似微信的摇一摇功能实现思路及代码

JQuery+Ajax实现数据查询、排序和分页功能_jquery

javabean servlet jsp实现分页功能代码解析_java

利用General框架进行三层架构开发

利用JQuery方便实现基于Ajax的数据查询、排序和分页功能

c#-MVC三层架构中的的添加功能怎么写

Yii框架结合sphinx,Ajax实现搜索分页功能示例_php实例