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。
相关文章推荐
- 一个关于if else容易迷惑的问题
- PHP5.2.*防止Hash冲突拒绝服务攻击的Patch
- 深入理解PHP之匿名函数
- bootstrap初试进度条
- JSP/PHP基于Ajax的分页功能实现
- 关于PHP通过PDO用中文条件查询MySQL的问题。
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- 什么是设计模式
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- PHP数据库长连接mysql_pconnect的细节
- Php Installing An Expansion
- angular 指令简述
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)