Question

网页设计中如何实现分页的效果

如果网页内的内容过多，就会使该网页拉长，这不但影响浏览效果，也影响网页的美观。因此如果网站内的内容过多时，许多人就想到了使网页分页。那么如何在设计网页的时候，实现这个效果呢？我想实现以下的效果第N页[共*页] <<1 2 3 4 5 6 7 8 9 10 >>。
大家能帮帮忙怎样实现这样的效果吗？

Answer 1

1、第"1"页是home的作用，始终有第"1"页，中间用"…"表示未显示的页码;

2、只提供"首页1+5个连续页码+最后一页"页码;开发者应该是考虑一般用户最多连续查看5页的内容。或者就直接跳至最后一页查看所以显示最后一页页码和直接跳至最后一页的快捷按钮;
3、搜索结果首次只提供10个页码;一般用户在这10页内还没找到想要的内容应该会更换搜索内容。脚印图形和下面页码对应都可点击翻页，增加了页面趣味性
4、因为搜索页面用户一般不会回到首页所以页面只有上一页和下一页的快捷按钮
5、点击任何一页码继续浏览，发现后续提供的页码是：当前页+9;便于用户扩大搜索范围放大。
6、花瓣"无限滚动翻页"，当用户浏览到页面底部，自动刷新页面展示新的信息;连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮"查看更多信息"，引导用户去浏览其他相关信息;页面过长时提供"回到顶部"按钮。

Answer 2

不清楚你的网站是用什么实现的，现在提供两种方法：

一、动态网页：这里有一段PHP代码，供参考，我这边运行成功：

1.显示内容部分
<?php
$page=$_GET["page"];
if($page=="")
{$page=1;}
if(is_numeric($page))
{
$page_size=30;
$query="select count(*) as total from solution order by id desc";
$result = mysql_db_query($dbn, $query);
$message_count=mysql_result($result,0,"total");
$page_count=ceil($message_count/$page_size);
$offset=($page-1)*$page_size;
$sql=mysql_db_query($dbn,"select * from solution order by id desc limit $offset,$page_size");
$row=mysql_fetch_object($sql);
if(!$row)
{
echo("No data！");
}
?>
<?php
do
{
?>
</p>
<p>+ <a href="<?php echo $row->pageurl; ?>.html" title="<?php echo $row->pagetitle; ?>"><?php echo $row->pagetitle; ?></a></p>
<?php
}while($row=mysql_fetch_object($sql));
?>
<?php
}
?>

2.分页部分
<?php
if($page!=1)
{
echo "<a href=index.php?page=1>First</a>   ";
echo "<a href=index.php?page=".($page-1).">Previous</a>   ";
}
if($page<$page_count)
{
echo "<a href=index.php?page=".($page+1).">Next</a>   ";
echo "<a href=index.php?page=".$page_count.">End</a>";
}
?>
</span> <span> Current Page：<?php echo $page;?> / <?php echo $page_count;?></span>
<?php
mysql_free_result($sql);
?>

二、静态网页用js：
用JavaScript伪分页，实际上内容还是在同一个页面上。

<div id="page_1">第1页内容</div>
<div id="page_2">第2页内容</div>
<div id="page_3">第3页内容</div>
<div id="page_4">第4页内容</div>
<script type="text/javascript">//<![CDATA[
var curpage=document.hash.substr(1);
for (var i=1;i<=4;++i) {
document.getElementById('page_'+i).style.display=(i==curpage)?'':'none';
}
//]]></script>

然后用 page.htm#1 page.htm#2 page.htm#3 page.htm#4 来链接4页。

Answer 3

用GridView空间，里面有自带的分页功能，将属性设置为true，然后在相应的事件里面写数据库的查询代码就可以了！
一、动态网页：这里有一段PHP代码，供参考，我这边运行成功：

1.显示内容部分
<?php
$page=$_GET["page"];
if($page=="")
{$page=1;}
if(is_numeric($page))
{
$page_size=30;
$query="select count(*) as total from solution order by id desc";
$result = mysql_db_query($dbn, $query);
$message_count=mysql_result($result,0,"total");
$page_count=ceil($message_count/$page_size);
$offset=($page-1)*$page_size;
$sql=mysql_db_query($dbn,"select * from solution order by id desc limit $offset,$page_size");
$row=mysql_fetch_object($sql);
if(!$row)
{
echo("No data！");
}
?>
<?php
do
{
?>
</p>
<p>+ <a href="<?php echo $row->pageurl; ?>.html" title="<?php echo $row->pagetitle; ?>"><?php echo $row->pagetitle; ?></a></p>
<?php
}while($row=mysql_fetch_object($sql));
?>
<?php
}
?>

2.分页部分
<?php
if($page!=1)
{
echo "<a href=index.php?page=1>First</a> ";
echo "<a href=index.php?page=".($page-1).">Previous</a> ";
}
if($page<$page_count)
{
echo "<a href=index.php?page=".($page+1).">Next</a> ";
echo "<a href=index.php?page=".$page_count.">End</a>";
}
?>
</span> <span> Current Page：<?php echo $page;?> / <?php echo $page_count;?></span>
<?php
mysql_free_result($sql);
?>

二、静态网页用js：
用JavaScript伪分页，实际上内容还是在同一个页面上。

<div id="page_1">第1页内容</div>
<div id="page_2">第2页内容</div>
<div id="page_3">第3页内容</div>
<div id="page_4">第4页内容</div>
<script type="text/javascript">//<![CDATA[
var curpage=document.hash.substr(1);
for (var i=1;i<=4;++i) {
document.getElementById('page_'+i).style.display=(i==curpage)?'':'none';
}
//]]></script>

然后用 page.htm#1 page.htm#2 page.htm#3 page.htm#4 来链接4页。

Answer 4

你这个是程序问题啊。

Answer 5

额，可以使用超级链接