使用javascript和codeigniter分页类进行分页

时间:2011-10-20 11:56:50

标签: php javascript codeigniter

使用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();
            });
        }

即使我阻止它们使用默认行为

,链接仍然表现为默认方式

1 个答案:

答案 0 :(得分:1)

点击侦听器分配可能是在el准备就绪之前触发的,因为您在.get成功回调之外设置了侦听器。尝试在<。em>里面设置监听器 .get成功回调:

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();
        });
    });
}