您的位置:首页 > Web前端 > BootStrap

Bootstrap结合PHP实现简单的翻页功能

2016-01-17 20:44 731 查看

需求分析:

我在搭建个人博客的过程中,遇到了这样一个需求:

点击“下一篇”按钮,页面展示出下一篇文章,点击“上一篇”按钮,页面展示上一篇文章。

这个需求很明显是一个翻页功能

前端设计:

个人博客的前端使用了Bootstrap框架,Bootstrap框架中有专门支持翻页的类page,它的效果如下图所示:



要实现这个效果,你需要加载Bootstrap库到HTML页面中,然后只需要在页面代码中添加如下语句即可:

<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>


注:这里的href属性先空着,在结合PHP时会用到.

PHP与MySQL后端实现:

这个功能最重要的地方在于后台,在于下面这条SQL查询语句:

SELECT * FROM article ORDER BY article_id DESC LIMIT $start,$limit


这条SQL查询语句通俗的来讲就是查询数据库中第 start条记录到第start+limit条记录的内容。例如:start = 5,limit = 5,那么我们的查询结果就是数据库中第6~10条记录。

因为这一个页面只显示一篇文章,所以这里的limit我们设定为1,start参数是动态变化的。另外我们还要注意一点:翻页翻到数据最上端时,“上一篇”按钮必须disabled,翻页翻到数据最末端的时候,“下一篇”按钮必须disabled,所以我们需要使用两个PHP变量pre和next来记录是否到达上、下端,最上端的数值界限为0,最末端的界限是数据库中所有记录的个数。

代码实现:

整体思路:

初始化:获取记录总数,设定limit = 1。

判断http请求中是否有start变量,如果有则读取$_REQUEST[‘start’],赋值给start变量,如果http请求中没有start变量,则表示这是初次访问,初始化start变量值为0.

然后执行相应的SQL语句,取得查询结果。

结果为空,将取得的值赋给相应的PHP变量,然后展示在页面中。

设置向前翻页和向后翻页的控制变量:pre与next。

根据pre和next的值来判断”上一篇”和“下一篇”按钮的状态。

下面是源代码:

//设置数据库的编码方式
mysql_query("set character set 'utf8'");//读库
mysql_query("set names 'utf8'");//写库

$result = mysql_query("SELECT * FROM article ORDER BY article_id DESC");
$num_max = mysql_num_rows($result);
$limit = 1;//间隔

if(isset($_REQUEST['start']))
{
$start = $_REQUEST['start'];
}
else
{
$start = 0;
}

$result = mysql_query("SELECT * FROM article order by article_id desc limit $start,$limit");

if(!empty($result))
{
//文章的标题、内容、创建时间
$title = mysql_result($result, 0, 'title');
$content = mysql_result($result, 0, 'content');
$time = mysql_result($result, 0, 'create_time');
}
//设置向前翻页的 控制变量
$pre = $start - $limit;

//设置向后翻页的控制变量
$next = $start + $limit;


修改Bootstarp“翻页”的HTML元素处的代码:

<nav>
<ul class="pager">
<?php
if($pre >= 0)
Echo "<li class='previous'><a href='index.php?start=$pre'>上一篇</a></li>";
else
echo "<li class='previous disabled'><a href='#'>上一篇</a></li>";
if($next < $num_max)
echo "<li class='next'><a href='index.php?start=$next'>下一篇</a></li>";
else
echo "<li class='next disabled'><a href='#'>下一篇</a></li>";
?>

</ul>
</nav>


通过PHP来判断状态,然后输出相对的HTML元素。

到这我们就实现了“翻页”功能,个人博客也进入了一个能用的状态。

欢迎大家来访问我的个人博客:yums467.sinaapp.com/index.php
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap php html