В данной статье рассматривается реализация 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); }); });
Вот и всё.
Источник: loco.ru