Алгоритм пагинации с использованием JavaScript

Question

У меня есть функция javascript, которая делает ajax-запрос к методу контроллера php, который возвращает JSON-кодированный массив.

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

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

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

        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;

        echo json_encode($server_response);
    }

У меня действительно нет идеи о том, как разбить на страницы данные, возвращаемые по запросу. Пожалуйста, укажите мне в правильном направлении

Answer 1

Это легко. Добавьте класс к своей ссылке на страницы (вы можете использовать переменную конфигурации full_tag_open и full_tag_close: <p class="pagination> и </p>). После этого вы можете переопределить событие .pagination a click (я использую JQuery):

function () {
    $(".pagination a").click(function(event){
        event.preventDefault();
        YourJSFunction($(this).attr("href"));
    });
}

Надеюсь, это вам поможет.