За последние 24 часа нас посетили 18874 программиста и 1641 робот. Сейчас ищут 1729 программистов ...

Переключение страниц без обновления страницы

Тема в разделе "JavaScript и AJAX", создана пользователем smartCreate, 18 янв 2017.

  1. smartCreate

    smartCreate Новичок

    С нами с:
    4 ноя 2016
    Сообщения:
    122
    Симпатии:
    4
    Добрый вечер, только что закончил делать вывод новостей из БД с постраничной разбивкой. Но не могу теперь разобраться как сделать переключение страниц без обновления страницы, делаю следующим образом:
    Код (Javascript):
    1. $(".pagination a").click(function(e){ // клик по номеру страницы
    2.     e.preventDefault(); // отменяем обновление
    3.     var url = $(this).attr('href').split('/')[5]; // определяем последний параметр ссылки который был указан в хрефе нажатой "a"
    4.     $('#content').load('feeds/page/'+url+' #content'); // подставляем полученную переменную в ссылку на страницу с блоком которые и нужно обновить на текущей странице
    5. });
    И все вроде бы хорошо, обновление происходит, контент подгружается без обновления, вот только сам пейджер (переключатель) страниц не работает. То есть нажимаем мы например на цифру 3 - контент который должен находиться на 3-й странице подтянулся, но пейджер так и остался на первой странице...

    вот разметка всего блока:
    PHP:
    1. <div id="content">
    2.     <?php foreach ($post_array as $feeds):?>
    3.         <div class="row feed">
    4.             <div class="col-md-12">
    5.                 <div class="info-block">
    6.                     <div class="info-text">
    7.                         <a href="/feeds/news/<?=$feeds['key_n']?>" target="_blank">
    8.                             <div class="news-title-container">
    9.                                 <h3><span class="color-text"><?=mb_substr($feeds['title'],0,50,'UTF-8')?>...</span></h3>
    10.                             </div>
    11.                             <div class="news-txt-container">
    12.                                 <p><?=mb_substr($feeds['txt'],0,300,'UTF-8')?>...</p>
    13.                             </div>
    14.                             <br>
    15.                             <?php if ($feeds['img'] == "") {}else{?>
    16.                                 <a class="fancyimage" rel="group1" href="/library/img/news/<?=$feeds['img']?>">
    17.                                     <img class="img-news" src="/library/img/news/<?=$feeds['img']?>" alt="Новости превью" />
    18.                                 </a>
    19.                             <?php }?>
    20.                             <span class="mow_news" style="pointer-events:none;">ОТ: <?=$feeds['date']?></span><br>
    21.                             <a href="/feeds/news/<?=$feeds['key_n']?>" target="_blank"><span class="mow_news">ЧИТАТЬ ДАЛЕЕ</span></a>
    22.                         </a>
    23.                     </div>
    24.                 </div>
    25.             </div>
    26.         </div>
    27.         <br>
    28.         <br>
    29.     <?php endforeach?>
    30. </div>
    31. <?php echo $this->pagination->create_links();?> // здесь выводиться разметка пейджера
    Вот обработчик пейджера на сервере:
    PHP:
    1. //КОНТРОЛЛЕР
    2. function page() {
    3.     $this->load->library('pagination');
    4.  
    5.     $config['base_url'] = base_url().'feeds/page/';
    6.     $config['total_rows'] = $this->db->count_all('feeds');
    7.     $config['per_page'] = '2';
    8.     $config['full_tag_open'] = '<p class="pagination">';
    9.     $config['full_tag_close'] = '</p>';
    10.     $config['first_link'] = '<span class="first_last">ПЕРВАЯ</span>';
    11.     $config['last_link'] = '<span class="first_last">ПОСЛЕДНЯЯ</span>';
    12.     $config['next_link'] = '<i class="fa fa-caret-square-o-right" aria-hidden="true"></i>';
    13.     $config['prev_link'] = '<i class="fa fa-caret-square-o-left" aria-hidden="true"></i>';
    14.  
    15.     $this->pagination->initialize($config);
    16.        
    17.     $this->data['post_array'] = $this->main_model->get_feeds($config['per_page'], $this->uri->segment(3));
    18.  
    19.     $this->load->view('pages/feeds/index', $this->data);
    20.     $this->load->view('pages/rooms/index');
    21. }
    22.  
    23. // МОДЕЛЬ
    24. function get_feeds($num, $offset){
    25.     $this->db->order_by("id", "desc");
    26.     $query = $this->db->get('feeds',$num, $offset);
    27.     return $query->result_array();
    28. }
    И на всякий случай, ссылка на страницу о которой идет речь:
    http://villabavaria.net/feeds

    У меня есть предположение что выбранный мною метод .load() - это не самое лучшее решение, но другого я увы не знаю, прошу помочь. Буду благодарен за любую помощь
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    jquery ajax или jquery post попробуй
     
  3. smartCreate

    smartCreate Новичок

    С нами с:
    4 ноя 2016
    Сообщения:
    122
    Симпатии:
    4
    Спасибо, разобрался, тема закрыта