Главная » Полезные статьи » Язык JavaScript » Ajax-пагинация в фреймворке CodeIgniter
Распечатать статью

Ajax-пагинация в фреймворке CodeIgniter

В данной статье рассматривается реализация 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

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи