В данной статье рассматривается реализация Ajax-пагинации в фреймворке CodeIgniter с использованием JavaScript-библиотеки jQuery.
Для начала сделаем обычную пагинацию, а потом разберемся как реализовать пагинацию без перезагрузки всей веб-страницы.
Здесь работающий пример: ajax-пагинация
У нас есть список автомобилей, который хранится в базе данных в таблице ex_cars:
1. Таблица в БД ex_cars (id, name, year, price)
id name year price
1 Ваз-2109 2010 8000
2 Ланос 2009 9000
3 Toyota 2010 30000
4 BMW 2009 40000
5 Audi 2010 50000
6 Opel 2009 25000
7 Skoda 2010 20000
Нам нужно вывести этот список на веб-страницу. Но поскольку база данных будет пополняться новыми автомобилями, то необходимо отображать фиксированное число записей и номера страниц в виде ссылок. Кликая по которым, мы сможем просмотреть все необходимые нам данные. Проще говоря, нам надо прикрутить пагинацию к выводимому списку автомобилей.
В фреймворке CodeIgniter для работы с пагинацией есть библиотека pagination.
Итак, наши дальнейшие действия:
1. Создаем модель Car_model в файле application\models\car_model.php. Здесь будут функции по работе с данными, т.е. с нашей таблицей ex_cars.
2. В конструкторе контроллера (контроллер я назвал Ajax) подключаем библиотеку pagination и нашу модель car_model.
3. Создаем метод контроллера, в котором будет реализована вся необходимая логика.
4. Создаем отображение, в которое и выведем наши данные.
Ниже смотрите код. Он содержит комментарии. Думаю, там все понятно.
Модель (файл application\models\car_model.php):
class Car_model extends Model {
protected $table = 'ex_cars';
// возвращает общее кол-во записей в таблице ex_cars
function count_all()
{
return $this->db->count_all($this->table);
}
// $limit - кол-во получаемых записей
// $offset - смещение, с какой записи начинать выборку
function list_cars($limit,$offset)
{
$this->db->limit($limit,$offset);
$query = $this->db->get($this->table);
return $query->result();
}
}
Контроллер (application\controllers\ajax.php):
class Ajax extends MY_Controller {
function Ajax()
{
parent::MY_Controller();
// подключаем модель
$this->load->model('car_model');
// подключаем библиотеку для работы с пагинацией
$this->load->library('pagination');
}
function paginate($offset='')
{
$limit = 3; //кол-во элементов списка на одной странице
// получаем данные из таблицы
// $limit - кол-во запрашиваемых записей
// $offset - смещение, т.е. с какой записи начинать выборку
$this->data['cars'] = $this->car_model->list_cars($limit,$offset);
// путь к веб-странице на которой делается пагинация
$config['base_url'] = site_url('ajax/paginate');
// получаем общее кол-во записей в таблице ex_cars
$config['total_rows'] = $this->car_model->count_all();
// кол-во элементов, которое мы хотим показать на странице
$config['per_page'] = $limit;
// инициализация пагинации на основании заданных условий
$this->pagination->initialize($config);
$this->data['pag_links'] = $this->pagination->create_links();
$this->data['inner_view'] = "pagination";
// передача данных в отображение
// main - главное отображение, в которое выводятся все остальные
// pagination - это отображение с нашим списком авто
$this->load->view('main', $this->data);
}
}
Отображение (application\views\pagination.php):
<table>
<tr>
<th>№</th>
<th>Марка</th>
<th>Год</th>
<th>Цена</th>
</tr>
<?foreach($cars as $car):?>
<tr>
<td><?=$car->id?></td>
<td><?=$car->name?></td>
<td><?=$car->year?></td>
<td><?=$car->price?></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-пагинация. JQuery, CodeIgniter.</h3> </center>
<div id="ajax_content">
<table>
<tr>
<th>№</th>
<th>Марка</th>
<th>Год</th>
<th>Цена</th>
</tr>
<?foreach($cars as $car):?>
<tr>
<td><?=$car->id?></td>
<td><?=$car->name?></td>
<td><?=$car->year?></td>
<td><?=$car->price?></td>
</tr>
<?endforeach;?>
</table>
<span class="ajax_pag"><?=$pag_links;?> </span>
</div> <!-- ajax_content -->
Какие изменения?
- таблицу мы поместили в блок
<div id='ajax_content'>
и присвоили ему id=’ajax_content’. Содержимое этого блока будет меняться при клике на ссылки пагинации.
- вывод ссылок заключили в тег
<span class='ajax_pag'>
- написали jQuery скрипт.
Что происходит в скрипте?
При клике на любую ссылку внутри блока с классом, мы получаем значение ссылки, по которой был произведен клик. И вместо стандартного перехода по этой ссылке, мы делаем ajax-запрос по полученному пути.
Этот запрос вернет данные в блок
Теперь в контроллере в метод paginate внесем проверку на тип запроса (обычный или ajax). Для обычного запроса у нас уже есть обработка, а в случае ajax-запроса мы будем выводить другое отображение, которое создадим ниже.
if(IS_AJAX){
$this->load->view('pagination_ajax', $this->data);
}else{
$this->data['inner_view'] = "pagination";
// передача данных в отображение
// 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');
Теперь приведу содержимое отображения pagination_ajax, которое мы возвращаем в случае ajax-запроса.
<table>
<tr>
<th>№</th>
<th>Марка</th>
<th>Год</th>
<th>Цена</th>
</tr>
<?foreach($cars as $car):?>
<tr>
<td><?=$car->id?></td>
<td><?=$car->name?></td>
<td><?=$car->year?></td>
<td><?=$car->price?></td>
</tr>
<?endforeach;?>
</table>
<span class="ajax_pag"> <?=$pag_links;?> </span>
Как видите, здесь просто вывод нашей таблицы.
Вот и все. Надеюсь, все понятно. Спасибо за внимание.
Успехов! :)