我们来看一下需求分析：
3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。
这里面有两个事件，都是js事件，我们用jquery代码来实现。
分页的话，我们采用jquery的分页插件pagination，官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件（最下面附下载地址）
先讲讲它的基本用法：
跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。
例如下面的使用代码：
[url=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的数据交换格式，格式示例如下：
[url=http://xiazai.jb51.net/201007/yuanma/fenye_aspnet_jquery.rar]css、js、dll、项目（仅无刷新分页）
[/url]
注：虽然提供了完整的代码，但不建议一开始就下载完整的，要自己动手
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
