Ajax-пагинация в фреймворке CodeIgniter

Cначала сделаем обычную пагинацию, а потом разберемся как реализовать поверх неё пагинацию без перезагрузки всей веб-страницы. В итоге получим ajax наложение на обычную пагинацию.

У нас есть список новостей, который хранится в базе данных в таблице news. Нам нужно вывести этот список на веб-страницу. Поскольку база данных будет пополняться новыми новостями, то необходимо отображать фиксированное число записей и номера страниц в виде ссылок, кликая по которым, мы сможем просмотреть все необходимые нам данные. Это и есть пагинация (постраничная навигация) к выводимому списку новостей.

В фреймворке CodeIgniter для работы с пагинацией есть библиотека pagination. Итак, наши дальнейшие действия:

1. Создаем модель mdl_news (файл application\models\mdl_news.php). Здесь будут функции по работе с данными, т.е. с нашей таблицей news.

2. В конструкторе контроллера (контроллер application/controllers/news.php) подключаем библиотеку pagination и нашу модель mdl_news.

3. Создаем метод контроллера, в котором будет реализована вся необходимая логика.

4. Создаем отображение, в которое и выведем наши данные. Ниже смотрите код. Он содержит комментарии.

Модель (файл application\models\car_model.php):

class mdl_news extends Model { 
   protected $table = 'news'; 
   // возвращает общее кол-во записей в таблице news 
   function count_all() 
   { 
      return $this->db->count_all($this->table); 
   } 
   // $limit - кол-во получаемых записей 
   // $offset - смещение, с какой записи начинать выборку 
   function list_news($limit,$offset) 
   { 
      $this->db->limit($limit,$offset); 
      $query = $this->db->get($this->table); 
      return $query->result(); 
   } 
} 

Контроллер (application\controllers\ajax.php):

class News extends MY_Controller { 
   function News() 
   { 
      parent::MY_Controller(); 
      // подключаем модель 
      $this->load->model('mdl_news'); 
      // подключаем библиотеку для работы с пагинацией 
      $this->load->library('pagination'); 
   } 
 
   function paginate($offset='') 
   { 
      $limit = 3; //кол-во элементов списка на одной странице 
      // получаем данные из таблицы 
      // $limit - кол-во запрашиваемых записей 
      // $offset - смещение, т.е. с какой записи начинать выборку 
      $this->data['news'] = $this->mdl_news->list_news($limit,$offset); 
      // путь к веб-странице на которой делается пагинация 
      $config['base_url'] = site_url('news/paginate'); 
      // получаем общее кол-во записей в таблице news 
      $config['total_rows'] = $this->mdl_news->count_all(); 
      // кол-во элементов, которое мы хотим показать на странице 
      $config['per_page'] = $limit; 
      // инициализация пагинации на основании заданных условий 
      $this->pagination->initialize($config); 
      $this->data['pag_links'] = $this->pagination->create_links(); 
      $this->data['inner_view'] = "news"; 
      // передача данных в отображение 
      // main - главное отображение, в которое выводятся все остальные 
      // pagination - это отображение с нашим списком авто 
      $this->load->view('main', $this->data); 
   } 
} 

Отображение (application\views\pagination.php):

<table> 
<tr> 
   <th>ID</th> 
   <th>Заголовок</th> 
   <th>Анонс</th> 
   <th>Дата</th> 
</tr> 
<?foreach($news as $new):?> 
<tr> 
   <td><?=$new->id?></td> 
   <td><?=$new->title?></td> 
   <td><?=$new->anons?></td> 
   <td><?=$new->date?></td> 
</tr> 
<?endforeach;?> 
</table> 
<?=$pag_links;?> 

Итак, обычная пагинация готова. Она должна функционировать уже.

Теперь в наш код необходимо внести некоторые дополнения и получить уже ajax-пагинацию. Что необходимо сделать? Смотрите, сейчас у нас в контроллере есть строка:

$this->data['pag_links'] = $this->pagination->create_links(); 

В этой строке генерируются ссылки на  страницы нашего списка (первую, вторую, следующую, предыдущую и т.д.) Эти ссылки мы и выводим в отображение. Теперь наша задача написать код, который будет перехватывать клик по этим ссылкам и вместо перенаправления, которое сейчас выполняется мы будет посылать ajax-запрос на получение необходимых данных и выводить эти данные в нужный блок.

Вносим изменения в наше отображение pagination

<script> 
$(document).ready(function(){ 
   $('.ajax_pag a').click(function(event){ 
   // получаем содержимое ссылки 
   var link = $(this).attr('href'); 
   // отменяем действие по умолчанию 
   event.preventDefault(); 
   // посылаем ajax-запрос по полученной ссылке 
   $('#ajax_content').load(link); 
   }); 
}); 
</script> 
 
<center><h3>Ajax-пагинация новостей. CodeIgniter.</h3>   </center> 
<div id="ajax_content"> 
<table> 
<tr> 
   <th>ID</th> 
   <th>Заголовок</th> 
   <th>Анонс</th> 
   <th>Дата</th> 
</tr> 
<?foreach($news as $new):?> 
<tr> 
   <td><?=$new->id?></td> 
   <td><?=$new->title?></td> 
   <td><?=$new->anons?></td> 
   <td><?=$new->date?></td> 
</tr> 
<?endforeach;?> 
</table> 
<span class="ajax_pag"><?=$pag_links;?> </span> 
</div> <!-- ajax_content --> 

Какие изменения?

- таблицу мы поместили в блок <div> и присвоили ему id=’ajax_content’. Содержимое этого блока будет меняться при клике на ссылки пагинации.

- вывод ссылок заключили в тег <span class=’ajax_pag’>.

- написали jQuery скрипт.

Что происходит в скрипте?

При клике на любую ссылку внутри блока с классом, мы получаем значение ссылки, по которой был произведен клик. И вместо стандартного перехода по этой ссылке, мы делаем ajax-запрос по полученному пути.
Этот запрос вернет данные в блок <div id=”ajax_content”></div>

Теперь в контроллере в метод paginate внесем проверку на тип запроса (обычный или ajax). Для обычного запроса у нас уже есть обработка, а в случае ajax-запроса мы будем выводить другое отображение, которое создадим ниже.

if(IS_AJAX){ 
   $this->load->view('news_ajax', $this->data); 
}else{ 
   $this->data['inner_view'] = "news"; 
   // передача данных в отображение 
   // main - главное отображение, в которое выводятся все остальные 
   // pagination - это отображение с нашим списком авто 
   $this->load->view('main', $this->data); 
} 

IS_AJAX – это константа, которую необходимо определить в файле
application\config\constants.php следующим образом:

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
         strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'); 

Теперь приведем содержимое отображения news_ajax, которое мы возвращаем в случае ajax-запроса.

<script type="text/javascript" src="<?=base_url()?>js/ajax_pagination.js"></script>
<table> 
<tr> 
   <th>ID</th> 
   <th>Заголовок</th> 
   <th>Анонс</th> 
   <th>Дата</th> 
</tr> 
<?foreach($news as $new):?> 
<tr> 
   <td><?=$new->id?></td> 
   <td><?=$new->title?></td> 
   <td><?=$new->anons?></td> 
   <td><?=$new->date?></td> 
</tr> 
<?endforeach;?> 
</table> 
<span class="ajax_pag"><?=$pag_links;?> </span>

Здесь мы также вынесли скрипт в отдельный файл ajax_pagination.js как полагается. Заметьте что он подключается в обоих отображениях - и news, и news_ajax.

Содержимое ajax_pagination.js :

$(document).ready(function(){
   $('.ajax_pag a').click(function(event){
   // получаем содержимое ссылки
   var link = $(this).attr('href');
   // отменяем действие по умолчанию
   event.preventDefault();
   // посылаем ajax-запрос по полученной ссылке
   $('#ajax_content').load(link);
   });
});

Вот и всё.