AJAX和三层架构实现分页功能具体思路及代码
程序员文章站
2022-05-18 08:33:31
复制代码 代码如下: -----------------------------htmlpage1.htm---------------------------------...
复制代码 代码如下:
-----------------------------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;
}
}
上一篇： JavaScript文档加载和事件绑定
下一篇： jsonDB使用手册