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

В данной статье рассматривается реализация Ajax-пагинации в фреймворке CodeIgniter с использованием JavaScript.

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

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

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

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

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

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

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

Модель (файл applicationmodelscar_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(); 
 } 
} 

Контроллер (applicationcontrollersajax.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); 
 } 
} 

Отображение (applicationviewspagination.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 – это константа, которую необходимо определить в файле
applicationconfigconstants.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.