Блог в помощь

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

1. Добавить select со списком годов и пунктом «Все».

2. Написать на jQuery обработчик на изменение года в данном select.

3. В данном обработчике получить год, который был выбран и отправить ajax-запрос на сервер с параметром «год выпуска».

4. В контроллере Ajax написать метод, который будет обрабатывать наш ajax-запрос.

Напоминаю ссылку на готовый пример: Ajax-фильтрация

Первые три пункта мы реализуем в отображении cars.php

1. Добавляем select:

Год: <select id="year">
   <option value="all">Все</option>
   <option value="2009">2009</option>
   <option value="2010">2010</option>
</select>

2. Подключаем библиотеку jQuery (если, она еще не подключена у Вас). И создаем обработчик на изменение элемента с id=”year”:

<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 таким образом :

$this->data['base_url'] = $this->config->item('base_url');

А в наше отображение cars.php попадает из метода index контроллера Ajax вместе с другими данными вот таким образом:

$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, а ниже немного разъяснений:

<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>

Нашу таблицу с информацией, мы заключили в блок с помощью тегов <div></div>. И присвоили этому блоку уникальный идентификатор id=”cars”.

В обработчике изменения года вместо вывода сообщения написали:

$('#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:

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 со следующим содержимым:

<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-фильтрация