Разбивка на страницы с классом разбивки на страницы javascript и codeigniter

Question

Создаю галерею изображений, используя codeigniter и javascript. Я добавляю пагинацию через класс пагинации codeigniter и чередую пагинационные ссылки URL в методе контроллера. Я хочу использовать только смещения, но не могу помешать ссылкам выполнять их действия по умолчанию

Вот мой метод управления

function gallery($offset= 0)
    {
        $limit = 12;
        $user_id = $this->session->userdata('user_id');
        $data = $this->avatar_model->user_avatars($user_id,$limit,$offset);
        $avatars = array();
        $count = $this->avatar_model->count_user_avatars($user_id);
        $pages = ceil($count/$limit);

        $this->load->library('pagination');

        $config['base_url'] = site_url("avatar/gallery");
        $config['total_rows'] = $count;
        $config['per_page'] = $limit; 
        $config['anchor_class'] = "paging_link";

        $this->pagination->initialize($config); 

        $links = $this->pagination->create_links();

        foreach($data as $key => $avatar)
        {
            $dat['avatar_id'] = $avatar->avatar_id;
            $dat['avatar_src'] = $avatar->avatar_small;
            $dat['create_date'] = time("d-m-Y",$avatar->create_date);
            $avatars[] = $dat;
        }

        $server_response['avatar_count'] = $count;
        $server_response['avatars'] = $avatars;
        $server_response['links'] = str_replace(site_url("avatar/gallery")."/","",$links);
        echo json_encode($server_response);
    }

и это функция javascript, выполняющая запрос

   function initGallery(offset) {
            if(offset === undefined)
            {
            var request_url = url+'avatar/gallery';
            } else {
            var request_url = url+'avatar/gallery/'+offset;
            }
            $('#avatar_gallery').html('')
            $.get(request_url,function(data) {
                var dat = jQuery.parseJSON(data);
                //Build gallery
                $('#avatar_gallery').html('<div class="gallery_box"></div>');
                $('.gallery_box').append('<div class="gallery_header">Your Avatar Gallery</div>');
                $('.gallery_box').append('<div class="gallery_container"></div>');
                $.each(dat.avatars,function(index,item)
                {
                    $('.gallery_container').append(
                        '<div class="gallery_item">'+
                        '<img src="'+item.avatar_src+'" id="'+item.avatar_id+'" onclick="avatar.view_avatar(this.id)"/>'+
                        '</div>'
                    );
                });
                    $('.gallery_box').append('<div class="gallery_footer"></div>');
                    $('.gallery_footer').html('<div class="gallery_pagination"><div>');
                    $('.gallery_pagination').append(dat.links);
            });
//paging_link is class attached to the pagination links
            $(".paging_link").click(function(e){
                alert("Clicked");
                e.preventDefault();
            });
        }

Ссылки по-прежнему ведут себя по умолчанию, даже после того, как я отключил их от поведения по умолчанию

Answer 1

Может случиться так, что назначение прослушивателя щелчка срабатывает до того, как el будет готов, потому что вы устанавливаете слушателя вне обратного вызова .get success.Попробуйте установить слушателя внутри обратного вызова .get success:

function initGallery(offset) {
    if(offset === undefined)
    {
        var request_url = url+'avatar/gallery';
    } else {
        var request_url = url+'avatar/gallery/'+offset;
    }
    $('#avatar_gallery').html('')
    $.get(request_url,function(data) {
        var dat = jQuery.parseJSON(data);
        //Build gallery
        $('#avatar_gallery').html('<div class="gallery_box"></div>');
        $('.gallery_box').append('<div class="gallery_header">Your Avatar Gallery</div>');
        $('.gallery_box').append('<div class="gallery_container"></div>');
        $.each(dat.avatars,function(index,item)
        {
            $('.gallery_container').append(
                '<div class="gallery_item">'+
                '<img src="'+item.avatar_src+'" id="'+item.avatar_id+'" onclick="avatar.view_avatar(this.id)"/>'+
                '</div>'
            );
        });
        $('.gallery_box').append('<div class="gallery_footer"></div>');
        $('.gallery_footer').html('<div class="gallery_pagination"><div>');
        $('.gallery_pagination').append(dat.links);
        //paging_link is class attached to the pagination links
        $(".paging_link").click(function(e){
            alert("Clicked");
            e.preventDefault();
        });
    });
}