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

2016-02-19 09:40 32 1 收藏

今天图老师小编要向大家分享个AJAX和三层架构实现分页功能具体思路及代码教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

代码如下:

-----------------------------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 += 'trtd编号/tdtd标题/tdtd内容/tdtd创建时间/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="#"第一页/aa href="#"上一页/aa href="#"下一页/aa href="#"最后一页/ainput
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 ListModel.T_News1 GetListAjax(int pagesize, int pageindex)
{
BLL.T_News1 bnews = new BLL.T_News1();
DataTable dt = bnews.GetListDataTable(pagesize, pageindex);
ListModel.T_News1 list = new ListModel.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;
}
}

来源:http://www.tulaoshi.com/n/20160219/1591664.html

延伸阅读
标签: Web开发
由于查询返回的数据量很大,超过10w条数据,因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法,自己编写分页显示模块。     首先在页面上添加几个DIV:         div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y...
一、软件下载: 1、java 这里使用的是jdk1.4.2。 下载地址:http://dlc.sun.com/jdk/j2sdk-1_4_2_07-windows-i586-p.exe; 2、tomcat 这里的tomcat的版本是5.0的,安装版或是解压版都是可以的。 下载地址:http://apache.linuxforum.net/dis ... a-tomcat-5.0.28.exe 3、数据库 推荐使用mysql,but暂时找不到下载地址,由于此次偶...
标签: Java JAVA基础
一、软件下载: 1、java 这里使用的是jdk1.4.2。 下载地址:http://dlc.sun.com/jdk/j2sdk-1_4_2_07-windows-i586-p.exe; 2、tomcat 这里的tomcat的版本是5.0的,安装版或是解压版都是可以的。 下载地址:http://apache.linuxforum.net/dis ... a-tomcat-5.0.28.exe 3、数据库 推荐使用mysql,but暂时找不到下载地址,由于此次...
当屏幕变为横屏的时候,系统会重新呼叫当前Activity的OnCreate方法,你可以把以下方法放在你的OnCreate中来检查当前的方向,然后可以让你的SetContentView来载入不同的Layout xml. 代码如下: if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) { Log.i("info", "landscape"); } else if (th...
标签: ASP
  注意事项: ※本文代码可能有一些多余部分未去掉,请在阅读时忽略。   一些外部include进来的文件这里就不贴上来了。 ※小乙写xsl也不久,很多语句都不会使用,有些地方写得比较罗嗦,   如果您有更好的分页代码,请多多拿来交流。 ※适用于:用asp load进来xml代码,然后用此xsl文件进行分页处理。 ※[2001.2.19] ...

经验教程

389

收藏

81
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部