Ajax-фильтрация. CodeIgniter, jQuery. Часть 1.
В данной статье рассмотрим один из вариантов использования технологии Ajax в фреймворке CodeIgniter.
Допустим, у нас уже выводится таблица с информацией об автомобилях. Наша задача – сделать ajax-фильтрацию, например, по году выпуска автомобиля.
Вот ссылка на рабочий пример: Ajax-фильтрация
Итак, у нас есть:
1. Таблица в БД ex_cars:
| id | name | year | price |
|---|---|---|---|
| 1 | Ваз-2109 | 2010 | 8000 |
| 2 | Ланос | 2009 | 9000 |
| 3 | Toyota | 2010 | 30000 |
| 4 | BMW | 2009 | 40000 |
| 5 | Audi | 2010 | 50000 |
2. Модель Car_model. И метод модели get_all(), который получает данные из таблицы ex_cars по условию или без условия, т.е. все данные.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class Car_model extends Model { protected $table = 'ex_cars'; function get_all($where='') { $this->db->select('*'); $this->db->from($this->table); if(!empty($where)) { $this->db->where($where); } return $this->db->get()->result(); } } |
3. Контроллер с именем Ajax. В контроллере есть конструктор, в нем мы подключаем нашу модель ‘car_model’. Еще есть метод index(). В нем с помощью метода get_all модели car_model мы получаем все данные из таблицы ex_cars и затем отсылаем их в отображение cars. Которое, в свою очередь выводится в основное отображение для всех моих примеров – main. Обратите внимание на то, что наш контроллер Ajax расширяет класс MY_Controller. Это мой суперконтроллер, от которого я наследую все контроллеры. Вы можете расширять стандартный контроллер Controller. В моем же суперконтроллере сейчас определена переменная public $data; и $this->data['base_url'] = $this->config->item(‘base_url’);
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MY_Controller extends Controller { public $data; //хранит массив данных, передаваемых во view function MY_Controller() { parent::Controller(); $this->data = array(); $this->data['base_url'] = $this->config->item('base_url'); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class Ajax extends MY_Controller { function Ajax() { parent::MY_Controller(); $this->load->model('car_model'); } function index() { $this->data['results'] = $this->car_model->get_all(); $this->data['inner_view'] = "cars"; $this->load->view('main', $this->data); } } |
4. Отображение cars.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($results as $res):?> <tr> <td><?=$res->name?></td> <td><?=$res->year?></td> <td><?=$res->price?></td> </tr> <?endforeach;?> </table> |
Теперь распишем по пунктам, что нам надо сделать:
1. Фильтрация по году выпуска, значит надо добавить select со списком годов и пунктом «Все».
2. Написать на jQuery обработчик на изменение года в данном select.
3. В данном обработчике получить год, который был выбран и отправить ajax-запрос на сервер с параметром «год выпуска».
4. В контроллере Ajax написать метод, который будет обрабатывать наш ajax-запрос.
Т.е. получать все автомобили с указанным годом выпуска и возвращать их в виде таблицы.
Во второй части статьи рассмотрим и реализуем поставленные задачи. Спасибо за внимание.
Свежие комментарии