Ajax-фильтрация. CodeIgniter, jQuery. Часть 2.
В первой части статьи мы разобрались с исходными данными и сформулировали задачи, которые необходимо выполнить для реализации ajax-фильтрации.
1. Добавить select со списком годов и пунктом «Все».
2. Написать на jQuery обработчик на изменение года в данном select.
3. В данном обработчике получить год, который был выбран и отправить ajax-запрос на сервер с параметром «год выпуска».
4. В контроллере Ajax написать метод, который будет обрабатывать наш ajax-запрос.
Напоминаю ссылку на готовый пример: Ajax-фильтрация
Первые три пункта мы реализуем в отображении cars.php
1. Добавляем select:
1 2 3 4 5 6 7 8 9 |
Год: <select id="year"> <option value="all">Все</option> <option value="2009">2009</option> <option value="2010">2010</option> </select> |
2. Подключаем библиотеку jQuery (если, она еще не подключена у Вас). И создаем обработчик на изменение элемента с id=”year”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="<?=$base_url?>/res/js/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $('#year').change(function(){ alert($(this).val()); }); }); </script> |
Напомню, что переменная $base_url получает свое значение (из config.php) в суперконтроллере MY_Controller таким образом :
1 2 3 4 5 |
$this->data['base_url'] = $this->config->item('base_url'); |
А в наше отображение cars.php попадает из метода index контроллера Ajax вместе с другими данными вот таким образом:
1 2 3 4 5 6 7 |
$this->data['results'] = $this->car_model->get_all(); $this->data['inner_view'] = "cars"; $this->load->view('main', $this->data); |
Т.е. в родительское отображение main передается весь массив $this->data, который содержит:
- имя внутреннего отображения (cars – в нем мы выводим нашу таблицу с авто)
- базовый url из config.php
- массив объектов – это данные о наших авто.
Итак, сейчас у нас при изменении года появляется сообщение со значением выбранного года. Т.е. мы уже начали реализовывать пункт 3. Осталось отправить ajax-запрос, что бы завершить выполнение нашего пункта 3.
3. Вот окончательный код отображения cars.php, а ниже немного разъяснений:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script> $(document).ready(function(){ $('#year').change(function(){ $('#cars').load("<?=site_url('ajax/ajax_filter');?>", {year:$(this).val()}, function(){ }); }); }); </script> <center><h3>Ajax-фильтрация. JQuery, CodeIgniter.</h3></center> <br/>Год: <select> <option value="all">Все</option> <option value="2009">2009</option> <option value="2010">2010</option> </select> <div id="cars"> <table> <tr> <th>Марка</th> <th>Год</th> <th>Цена</th> </tr> <?foreach($results as $res):?> <tr> <td><?=$res->name?></td> <td><?=$res->year?></td> <td><?=$res->price?></td> </tr> <?endforeach;?> </table> </div> |
Нашу таблицу с информацией, мы заключили в блок с помощью тегов
. И присвоили этому блоку уникальный идентификатор id=”cars”.
В обработчике изменения года вместо вывода сообщения написали:
1 2 3 4 5 6 7 8 |
$('#cars').load("<?=site_url('ajax/ajax_filter');?>", {year:$(this).val()}, function(){ }); |
Т.е. в блок с идентификатором id=”cars” мы с помощью функции load загружаем результат, возвращаемый функцией ajax_filter контроллера ajax. Эту функцию мы напишем в следующем пункте 4.
Функция load – выполняет ajax-запрос.
1 параметр – url, куда мы посылаем запрос. Для нашего примера – это
“=site_url('ajax/ajax_filter');?>“.
2 параметр – [data], данные, отправляемые вместе с запросом на сервер. В нашем случае – это год выпуска автомобиля.
3 параметр – [callback], функция-колбэк, которая выполняется после завершения запроса и получения ответа. В нашем примере эта функция ничего не выполняет. Ее можно было и не писать.
4. Создаем метод, который будет обрабатывать наш ajax-запрос. По url запроса (‘ajax/ajax_filter’) видно, что этот метод должен называться ajax_filter и располагаться в контроллере ajax:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function ajax_filter() { $result = array(); $year = $this->input->post('year'); $where = ''; if($year != 'all' ){ $where = array('year'=>"{$year}"); } $result['cars'] = $this->car_model->get_all($where); $this->load->view('ajax',$result); } |
В данном методе:
- инициализируем массив результата $result
- получаем год выпуска, который мы передали вторым параметром в функцию load.
- делаем проверку на то, выбран ли пункт «все» или конкретный год.
- в $result['cars'] получаем все автомобили согласно полученному условию
- передаем полученный результат в отображение ‘ajax’
Теперь осталось создать отображение ajax.php со следующим содержимым:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table> <tr> <th>Марка</th> <th>Год</th> <th>Цена</th> </tr> <?foreach($cars as $car):?> <tr> <td><?=$car->name?></td> <td><?=$car->year?></td> <td><?=$car->price?></td> </tr> <?endforeach;?> </table> |
Здесь мы выводим таблицу, которая полностью заменит в отображении cars содержимое блока с id=”cars”.
Обратите внимание, что цикл foreach пробегает по массиву $cars, а не по $result.
Итак, мы реализовали поставленную задачу – ajax-фильтрация данных, т.е. фильтрация без перезагрузки web-страницы. Работающий пример здесь: Ajax-фильтрация
Было бы неплохо, еще на исходники глянуть, спасибо!
Да я вообщем то хотел сортировку прикрутить в Опенкарту, но там вьюхи в виде *.tpl, а у вас php.
В статье расписано что во вьюшку (отображение) добавляется, что в контроллер. Конкретные файлы смотрите в вашем проекте.
Алексей, подскажи, есть готовый сайт, куда прикрутить вот это все по сортировке Аякса. Спасибо!