没有合适的资源?快使用搜索试试~ 我知道了~
一步步打造漂亮的新闻列表(无刷新分页、内容预览)第三章
需积分: 0 0 下载量 13 浏览量
2020-10-28
23:54:33
上传
评论
收藏 78KB PDF 举报
温馨提示
试读
5页
前面两个章节我们将需求分析和概要设计简单介绍了,接下来是重点的编代码的阶段了(实现无刷新分页)。在编写代码之前,一定要有计划的去编写代码,不能一开始啥也不管就开始编代码,除非你特牛。
资源推荐
资源详情
资源评论
一步步打造漂亮的新闻列表一步步打造漂亮的新闻列表(无刷新分页、内容预览无刷新分页、内容预览)第三章第三章
前面两个章节我们将需求分析和概要设计简单介绍了,接下来是重点的编代码的阶段了(实现无刷新分页)。
在编写代码之前,一定要有计划的去编写代码,不能一开始啥也不管就开始编代码,除非你特牛。
我们来看一下需求分析:
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)。您可以对
照参数表修改配置这里的参数。
具体的用法可以参考官方文档或是http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.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,
资源评论
weixin_38670420
- 粉丝: 6
- 资源: 949
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功