一步步打造漂亮的新闻列表(无刷新分页、内容预览)(3)
2010-07-11 09:35
661 查看
前面两个章节我们将需求分析和概要设计简单介绍了,接下来是重点的编代码的阶段了(实现无刷新分页)。在编写代码之前,一定要有计划的去编写代码,不能一开始啥也不管就开始编代码,除非你特牛。
我们来看一下需求分析:
3.==》无刷新的分页读取新闻列表,在点击下一页的时候触发事件,调用ajax去数据库中查找下一页的数据并返回,然后显示在页面上。
这里面有两个事件,都是js事件,我们用jquery代码来实现。
分页的话,我们采用jquery的分页插件pagination,官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件(最下面附下载地址)
先讲讲它的基本用法:
跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是
例如下面的使用代码:
这段代码表示的含义是:总共有56(maxentries)个列表项,首尾两侧分页显示2(num_edge_entries)个,连续分页主体数目显示4(num_display_entries)个,回调函数为pageselectCallback(callback),每页显示的列表项为 1(items_per_page)。您可以对照参数表修改配置这里的参数。
具体的用法可以参考官方文档或是/article/6036823.html
然后讲讲如何将它整合到我们这边来。
在NewsList.aspx页面中添加相关的js文件和css文件(最下面附下载地址):jquery-1.4.1.js,pagination.js
<link type="text/css" rel="Stylesheet" href="css/newsList.css" />
<link type="text/css" rel="Stylesheet" href="css/pagination.css" />
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
然后,我们来看关键的js代码:
<script type="text/javascript" language="javascript">
$().ready(function() {
InitData(0);
});
//处理翻页
function pageselectCallback(page_id, jq) {
//alert(page_id);
InitData(page_id);
};
function InitData(pageindx)
{
var tbody = "";
var orderby="news_id";
$.ajax({
type: "POST",//用POST方式传输
dataType:"json",//数据格式JSON
url:'Ajax/NewsHandler.ashx',//目标地址
data:"pageno="+(pageindx+1)+"&orderby="+orderby,
success:function(json) {
$("#productTable tr:gt(0)").remove();
var productData = json.News;
$.each(productData, function(i, n) {
var trs = "";
trs += "<tr><td style='text-align:center'><a href=\"NewsRead.aspx?news_id="+n.news_id+"\" class=\"info2\" >" + n.news_title + "</a></td><td style='text-align:center'>" + n.news_readtimes + "</td><td style='text-align:center'>" + n.news_time + "</td></tr>";
tbody += trs;
});
$("#productTable").append(tbody);
//奇偶行颜色不同
$("#productTable tr:gt(0):odd").attr("class", "odd");
$("#productTable tr:gt(0):even").attr("class", "enen");
}
});
$("#pagination").pagination(<%=pagecount %>, {
callback: pageselectCallback,
prev_text: '<< 上一页,
next_text: '下一页 >>',
items_per_page:9,
num_display_entries:6,
current_page:pageindx,
num_edge_entries:2
});
}
</script>
这里有必要说明下json数据格式,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它是类似于xml的数据交换格式,格式示例如下:
[
{
"term":"BACCHUS",
"part":"n.",
"definition":"A convenient deity invented by the ancients as an excuse for getting drunk.",
"quote":[
"Is public worship,then,a sin.",
"That for devotions paid to Bacchus",
"The lictors dare to run us in.",
"And resolutely thump and whack us?"
],
"author":"Jorace"
},
{
"term":"BACKBITE",
"part":"v.t.",
"definition":"To speak of a man as you find him when he can t find you."
},
{
"term":"BEARD",
"part":"n.",
"definition":"The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the bead."
}
]
asp.net有现成的josn处理的dll,名为Newtonsoft.Json.Net20(最下面附下载地址),用它处理json非常的方便,我们可以像处理对象一样处理json。
因为我们在读取列表的时候从数据库中读出来的是一张table(datatable格式),而要将它显示在前台,如果自己一个个拼凑字符串的话会非常麻烦,而且扩展性不好,所有我们采用json文件,这样就需要一个方法将datatable转为json,该方法如下:
代码
protected void InitPageCount()
{
conn = new OleDbConnection(connectionString);//创建新的连接
try
{
conn.Open();
string cmdText = "select count(0) as pages from tb_news";
OleDbCommand cmd = new OleDbCommand(cmdText, conn);
DataTable dt = new DataTable();
OleDbDataAdapter oda = new OleDbDataAdapter(cmd);
oda.Fill(dt);
if (dt != null)
{
pagecount = dt.Rows[0]["pages"].ToString();
}
}
catch (Exception e)
{
pagecount = "0";
Response.Write("Error:" + e.Message);//如果连接失败,将错误显示出来
}
finally
{
conn.Close();//一定要及时关掉conn
}
}
需-需声明protected string pagecount;以便让前台能够获取
附代码的下载:(只实现了无刷新的分页,预览新闻内容等待下一章)
css、js、dll、项目(仅无刷新分页)
注:虽然提供了完整的代码,但不建议一开始就下载完整的,要自己动手
分享
|
我们来看一下需求分析:
3.==》无刷新的分页读取新闻列表,在点击下一页的时候触发事件,调用ajax去数据库中查找下一页的数据并返回,然后显示在页面上。
这里面有两个事件,都是js事件,我们用jquery代码来实现。
分页的话,我们采用jquery的分页插件pagination,官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件(最下面附下载地址)
先讲讲它的基本用法:
跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是
pagination,例如
$("#page").pagination(100);,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用。
例如下面的使用代码:
$("#Pagination").pagination(56, { num_edge_entries: 2, num_display_entries: 4, callback: pageselectCallback, items_per_page:1 });
这段代码表示的含义是:总共有56(maxentries)个列表项,首尾两侧分页显示2(num_edge_entries)个,连续分页主体数目显示4(num_display_entries)个,回调函数为pageselectCallback(callback),每页显示的列表项为 1(items_per_page)。您可以对照参数表修改配置这里的参数。
具体的用法可以参考官方文档或是/article/6036823.html
然后讲讲如何将它整合到我们这边来。
在NewsList.aspx页面中添加相关的js文件和css文件(最下面附下载地址):jquery-1.4.1.js,pagination.js
<link type="text/css" rel="Stylesheet" href="css/newsList.css" />
<link type="text/css" rel="Stylesheet" href="css/pagination.css" />
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
然后,我们来看关键的js代码:
<script type="text/javascript" language="javascript">
$().ready(function() {
InitData(0);
});
//处理翻页
function pageselectCallback(page_id, jq) {
//alert(page_id);
InitData(page_id);
};
function InitData(pageindx)
{
var tbody = "";
var orderby="news_id";
$.ajax({
type: "POST",//用POST方式传输
dataType:"json",//数据格式JSON
url:'Ajax/NewsHandler.ashx',//目标地址
data:"pageno="+(pageindx+1)+"&orderby="+orderby,
success:function(json) {
$("#productTable tr:gt(0)").remove();
var productData = json.News;
$.each(productData, function(i, n) {
var trs = "";
trs += "<tr><td style='text-align:center'><a href=\"NewsRead.aspx?news_id="+n.news_id+"\" class=\"info2\" >" + n.news_title + "</a></td><td style='text-align:center'>" + n.news_readtimes + "</td><td style='text-align:center'>" + n.news_time + "</td></tr>";
tbody += trs;
});
$("#productTable").append(tbody);
//奇偶行颜色不同
$("#productTable tr:gt(0):odd").attr("class", "odd");
$("#productTable tr:gt(0):even").attr("class", "enen");
}
});
$("#pagination").pagination(<%=pagecount %>, {
callback: pageselectCallback,
prev_text: '<< 上一页,
next_text: '下一页 >>',
items_per_page:9,
num_display_entries:6,
current_page:pageindx,
num_edge_entries:2
});
}
</script>
这里有必要说明下json数据格式,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它是类似于xml的数据交换格式,格式示例如下:
[
{
"term":"BACCHUS",
"part":"n.",
"definition":"A convenient deity invented by the ancients as an excuse for getting drunk.",
"quote":[
"Is public worship,then,a sin.",
"That for devotions paid to Bacchus",
"The lictors dare to run us in.",
"And resolutely thump and whack us?"
],
"author":"Jorace"
},
{
"term":"BACKBITE",
"part":"v.t.",
"definition":"To speak of a man as you find him when he can t find you."
},
{
"term":"BEARD",
"part":"n.",
"definition":"The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the bead."
}
]
asp.net有现成的josn处理的dll,名为Newtonsoft.Json.Net20(最下面附下载地址),用它处理json非常的方便,我们可以像处理对象一样处理json。
因为我们在读取列表的时候从数据库中读出来的是一张table(datatable格式),而要将它显示在前台,如果自己一个个拼凑字符串的话会非常麻烦,而且扩展性不好,所有我们采用json文件,这样就需要一个方法将datatable转为json,该方法如下:
代码
protected void InitPageCount()
{
conn = new OleDbConnection(connectionString);//创建新的连接
try
{
conn.Open();
string cmdText = "select count(0) as pages from tb_news";
OleDbCommand cmd = new OleDbCommand(cmdText, conn);
DataTable dt = new DataTable();
OleDbDataAdapter oda = new OleDbDataAdapter(cmd);
oda.Fill(dt);
if (dt != null)
{
pagecount = dt.Rows[0]["pages"].ToString();
}
}
catch (Exception e)
{
pagecount = "0";
Response.Write("Error:" + e.Message);//如果连接失败,将错误显示出来
}
finally
{
conn.Close();//一定要及时关掉conn
}
}
需-需声明protected string pagecount;以便让前台能够获取
附代码的下载:(只实现了无刷新的分页,预览新闻内容等待下一章)
css、js、dll、项目(仅无刷新分页)
注:虽然提供了完整的代码,但不建议一开始就下载完整的,要自己动手
分享
|
相关文章推荐
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(3)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第一步
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(1)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(1)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第一步
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(4)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(2)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(4)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第三章
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第三章
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)(2)
- 一步步打造漂亮的新闻列表(无刷新分页、内容预览)第二步
- JS+ASP打造无刷新新闻列表
- Javascript+ASP打造无刷新新闻列表
- asp+ajax 无刷新新闻列表,点击分页不局部刷新(代码,有下载)
- JS+ASP打造无刷新新闻列表
- Ajax根据异步刷新div内列表内容,带前台JS获取列表li数量分页
- 一步步打造基于ASP.NET的CMS内容管理系统--Step3 添加新闻页面
- Javascript+ASP实现无刷新新闻列表