Ajax-пагинация в фреймворке CodeIgniter
В данной статье рассматривается реализация Ajax-пагинации в фреймворке CodeIgniter с использованием JavaScript.
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); }); });
Вот и всё.
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Разделитель тысяч в эффекте наматываемого счётчика jquery countTo (05.04.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015)
- Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation) (20.08.2015)
- Несколько функций в body onload (08.03.2013)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- Как правильно обновить ExpressionEngine до последней версии 2.5.5 (05.02.2013)
- Team Sense: Доступна отправка сообщения/письма на email сотрудника. (18.01.2013)
- TeamSense: username (логин) в регистрации пользователя. Внедрили библиотеку DHTMLX в TeamSense. (11.01.2013)
- Team Sense: В календарь добавлена возможность указывать место проведения уроков (в офисе, на выезде) (12.12.2012)
- jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery (08.12.2012)
- Team Sense: Многопользовательский календарь, заменяем радиокнопки на чекбоксы в выборе преподавателей. Массивы в Javascript. (06.12.2012)
- Team Sense: В календарь-расписание уроков добавлено разделение по преподавателям, которым присвоены свои цвета. (04.12.2012)
- CodeIgniter не передаёт $this->uri->segment(3) в функцию контроллера (передача переменной PHP->JavaScript->PHP) (28.11.2012)
- Случаи возникновения ошибки в IE: "Предполагается наличие идентификатора, строки или числа" (Expected identifier, string...) (23.11.2012)
2 комментариев