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

需求分析：

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

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

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

---

前端设计：

个人博客的前端使用了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,最末端的界限是数据库中所有记录的个数。

---

代码实现：

整体思路：

1. 初始化：获取记录总数，设定limit = 1。
2. 判断http请求中是否有start变量，如果有则读取$_REQUEST[‘start’]，赋值给start变量,如果http请求中没有start变量,则表示这是初次访问，初始化start变量值为0.
3. 然后执行相应的SQL语句，取得查询结果。
4. 结果为空，将取得的值赋给相应的PHP变量，然后展示在页面中。
5. 设置向前翻页和向后翻页的控制变量:pre与next。
6. 根据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。