【军哥谈CI框架】之Ajax分页教程—《兄弟连微电影第一季一路向东之屌丝程序员之戏说PHP》演...

有些时候呢，你可能需要把数据库查询所得到的一些数据或一组结果拆分成多页显示。在这时，你将需要写某种分页脚本。这对于从没有做过这个的开发者来说还是有一定难度的，更何况用Ajax来实现分页效果，然而在CI中一切将变得轻而易举。

在众多“军迷”们的强烈要求下，今天军哥就来讲下CI中实现AJAX分页的教程。

CI中具有非常容易使用的分页类。在本教程中军哥会做一个从数据库返回一组结果并分页这些结果的简单例子——《兄弟连微电影第一季一路向东之屌丝程序员之戏说PHP》演员表一览示例（顺便爆料一下，我们兄弟连拍摄的首部微电影反响相当滴不错，同时也诞生了兄弟连首位金鸭奖最佳男猪脚——丛浩，不信，有图为证呢~~

明导和闫导两位大导演正在紧锣密鼓的筹拍着下一部，听说正在招募演员额，嘻嘻，期待吧~~）。我将使用最新版本的 CI，版本是2.1.3。好，现在，让我们开始吧。

开始前，先一起预览一下效果图吧~~

一、基本配置和数据库配置

当我们开始写一个 CI 应用程序时，我们要设置很多东西。我们首先打开 config.php 文件(可在application/config/ 中找到)。在这里我们将输入站点根 URL。你的设置可能会和我的略有不同，这是我的设置：

$config['base_url'] = 'http://localhost/ci_pagination_ajax';

我们下一步的工作是创建数据库，并进行数据库配置。要做到这一点请打开 database.php文件(这也可在/application/config/ 中找到)，并填写必要的信息，以便连接到你的数据库。如果你愿意可以使用军哥为你准备好的例子代码和例子数据库（详见附件）。

二、模型

我们的基本配置文件和数据库设置已经完成，同时我们也拥有了数据库和数据表，现在我们需要创建一个模型来完成CI访问我们的数据库，代码如下：

/**
 * 功能：演员表模型
 * @author JayJun
 * @copyright 2012.10.26
 */

class M_cast extends CI_Model {

         //获取演员信息 
        function get($limit,$offset = 0) {
             $data = '';
             $this->db->select('id,name,nickname,pic,role,remark,display');
             $query = $this->db->get_where('cast', array('display' => '1'),$limit,$offset);
             $data = $query->result_array();
             return $data;
         } 
    
         //统计演员总数量，满足条件为display值为1的
         function count() {
             $data = '';
             $this->db->where('display', '1');
             $data = $this->db->count_all_results('cast');
             return $data;
         }
}

OK，在军哥这个分页教程中，我们的模型将包含两个方法：查询演员信息和统计演员总数量。我给这个模型命名为m_cast.php，我们希望取得的演员信息分页显示在屏幕上，正如你所看到的，控制器中的get方法有两个参数，一个 limit 和另一个 offset。$limit 指明从数据库中取得的记录数，$offset 指明将从哪开始获取记录。

$query = $this->db->get_where('cast', array('display' => '1'),$limit,$offset);

上面的代码将产生下面的 MySQL 查询(举例)：

SELECT * FROM ci_cast WHERE display='1' LIMIT 10, 5

5 代表 $limit，10 代表 $offset。我们存储这些结果在一个名为 $query 的变量中，然后把变量进行生成查询记录集，并返回给调用它的方法。把这些结合起来，我们的模型就写完了。

三、控制器
好，完成了模型的编写工作，紧接着我们写一个控制器，我将它命名为“cast.php”，包含代码如下：

/**
 * 功能：演员控制器
 * @author JayJun
 * @copyright 2012.10.26
 */
class cast extends CI_Controller {

        // 构造函数
        function __construct() {
              parent::__construct();
              //载入url辅助函数
              $this->load->helper('url');
              //载入演员表模型
              $this->load->model('M_cast');
        }

        //显示演员列表页
        function index($num = '') {
              //载入CI自带的分页类库
              $this->load->library('pagination');
              //通过$config 数组设置分页类的配置参数
              $config['base_url'] = site_url('cast/index');
              $config['total_rows'] = $this->M_cast->count();//total_rows 这个数字展示了你需要做分页的数据总行数，我们可以通过演员表模型中count方法获得
              $config['per_page'] = 1;//分页类每页显示多少条记录
              $config['uri_segment'] = 3;// 表示第 3 段 URL 为当前页数，如 index.php/控制器/方法/页数，如果表示当前页的 URL 段不是第 3 段,请修改成需要的数值。
              $config['full_tag_open'] = '<ul>';
              $config['full_tag_close'] = '</ul>';
              $config['cur_tag_open'] = '<li class="active"><a>';
              $config['cur_tag_close'] = '</a></li>';
              $config['num_tag_open'] = '<li>';
              $config['num_tag_close'] = '</li>';
              $config['prev_tag_open'] = '<li>';
              $config['prev_tag_close'] = '</li>';
              $config['next_tag_open'] = '<li>';
              $config['next_tag_close'] = '</li>';
              $config['first_link'] = '首页';
              $config['first_tag_open'] = '<li>';
              $config['first_tag_close'] = '</li>';
              $config['last_link'] = '末页';
              $config['last_tag_open'] = '<li>';
              $config['last_tag_close'] = '</li>';
              $this->pagination->initialize($config);//分页类中的initialize方法传递参数配置
              $data['caststr'] = $this->M_cast->get($config['per_page'],$num);
              $data['pagestr'] = $this->pagination->create_links();//分页类中的 create_links()方法将输出分页链接
              $this->load->view('cast_index',$data);
       }        
}

首先，我们在构造函数中装载URL辅助函数 和 数据库模型。当然，你不一定要创建一个构造函数并装载这些辅助函数，因为它可以很容易的在控制器中的其它函数/方法中装载，但是，如果辅助函数将用于控制器中的大多数/所有方法的话，我通常倾向于创建一个构造函数并把它们放在里面。当然你也可以让CI自动装载这些辅助函数，只需打开 application/config/autoload.php 文件，然后将你想要自动装载的项目添加到 autoload数组中。

$autoload['helper'] = array('url','cookie','form');

其次，我们创建了一个名为 index() 的方法。这是一个非常基本的步骤，正因如此，我们将只需要这种单一的方法，使我们装载分页类以及模型。CI中自带的分页类是可以自定义的，具体参数设置及含义请看控制器中的代码，这里也注释的很清楚。分页的样式也可以通过配置参数自定义的，这里军哥还是一如既往的使用bootstrap前端框架中写好的样式，后面视图中也用了很多哦（如果你读过军哥之前写的CI系列文章的话，那么你自然清楚军哥此时在说什么，如果你没读过并且是新手的话，请挪步到 《军哥谈CI框架》之无限分类类库的实现和应用  ，里面有介绍到 ）。

紧接的是，我们要创建视图啦！

四、视图

记住，一个视图就是一个简单的 Web 页面或页面片段。所以，在这里我们的视图是一个在表格里显示演员信息的 Web 页面。让我们来看看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Ajax分页教程——《兄弟连微电影第一季一路向东之屌丝程序员之戏说PHP》演员表一览示例</title>
        <link rel="stylesheet" href="<?php echo base_url('public/css/base.css');?>" type="text/css" />
        <link rel="stylesheet" href="<?php echo base_url('bootstrap/css/bootstrap.min.css');?>" type="text/css" />
        <script src="<?php echo base_url('public/scripts/jquery-1.7.1.min.js');?>"></script>
        <script src="<?php echo base_url('public/scripts/ajax3.0.js');?>"></script>
        </head>
        <body>
        <div id="castinfo" class="w700 mt20 bc">
               <table class="table table-striped table-bordered">
                      <caption class="f16 tc fb mb20">《兄弟连微电影第一季一路向东之屌丝程序员之戏说PHP》演员表一览：</caption>
                      <?php foreach ($caststr as $item): ?>
                      <tr>
                            <td width="369"><img src="<?php echo base_url('/uploads/'.$item['pic']); ?>"></td>
                            <td>
                                 <p>
                                      <span class="fb">姓名：</span>
                                      <span><?php echo $item['name']; ?></span>
                                 </p>
                                 <p>
                                      <span class="fb">昵称：</span>
                                      <span><?php echo $item['nickname']; ?></span>
                                 </p>
                                 <p>
                                      <span class="fb">饰演角色：</span>
                                      <span><?php echo $item['role']; ?></span>
                                 </p>
                                 <p>
                                      <span class="fb">备注：</span>
                                      <span><?php echo $item['remark']; ?></span>
                                 </p>                                                
                            </td>
                      </tr>
                      <?php endforeach; ?>
               </table>
               <div class="pagination pagination-centered">
                       <?php echo @str_replace('href','ajaxhref',$pagestr); ?>
               </div>
         </div>
        </body>
        <script type="text/javascript">
        $(".pagination a").live('click',function(){
               var url = $(this).attr('ajaxhref');
               //alert(url);
               if(url!='undefined'){
                      var ajax = new Ajax();
                      ajax.get(url,function(data){
                            $("#castinfo").html(data);
                      });
               }
         });
        </script>
</html>

首先，把从通过控制器调用模型中的方法得到的结果传递到变量$caststr（数组）中，这样，我们就可以使用视图文件的php语法替代控制结构来遍历输出该变量相对应的值。

<?php foreach ($caststr as $item): ?>
      //省略...
<?php endforeach; ?>

同理我们按照上述思路输出分页显示。为了实现AJAX分页效果，军哥在输出分页的时候，把分页里面的href全部替换掉，这是为了防止CI分页的时候会发生跳转。

<div class="pagination pagination-centered">
     <?php echo @str_replace('href','ajaxhref',$pagestr); ?> 
</div>

同时写了一段JQuey代码,来帮助我们通过Ajax方式访问数据库。

$(".pagination a").live('click',function(){
       var url = $(this).attr('ajaxhref');  //获取鼠标点击时分页链接的url
       //alert(url);
       if(url!='undefined'){
              var ajax = new Ajax();  //实例化Ajax对象，这里是用高老师封装写好的ajax3.0，当然你也可以采用JQuery中的ajax来帮你实现
              ajax.get(url,function(data){    //调用Ajax对象中的get方法
                     $("#castinfo").html(data);
              });
       }
});

五、应用
（1）、先下载附件，解压之后，拷贝到网站根目录下；
（2）、找到文件ci_pagination_ajax.sql，建库建表；
（3）、修改配置文件 ci_pagination_ajax/application/config/database.php，只需设置$db['default']['password'] ='你的数据库密码'; ，大概在10行；
（4）、浏览器输入http://localhost/ci_pagination_ajax/index.php/cast/index即可访问该示例效果。

六、总结

好了，上面军哥简单介绍了如何使用CI自带的分页类来实现Ajax分页的功能，正如你看到的那样，添加分页功能到你的 CI 中并不难。当然，军哥实现的方式不见得就是最优的方式，如果你有更好的方法，欢迎您来赐教，咱们相互讨论，共同进步！

附件下载：http://bbs.lampbrother.net/job.php?action=download&aid=22581

大功告成，打完收工！我爱你们~~