4

Вопрос по css, html, jquery, javascript – Простая нумерация страниц

У меня есть страница с около 50 делами на нем. Я хотел бы организовать эти деления в группы по шесть человек, чтобы клиент не получал "информационную перегрузку". Я создал простойпример / сокращенный контрольный пример моей проблемы. Как вы можете видеть, там много div-ов, и я хочу, чтобы при загрузке страницы были видны только первые шесть, но когда вы нажимаете на страницу 2 или далее, показываются следующие шесть и так далее. Класс номера страницы, на которой вы находитесь, также должен быть установлен, чтобы иметьclass="current".

До сих пор я пытался использовать jQuery, но я застрял! Любая помощь приветствуется!

  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Каждый раз, когда вы видите код, как$('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show(); это кандидат на использование цикла. Просто скажи & apos;

    от
  • Для этого существует множество плагинов jQuery. Например:jquery4u.com/plugins/10-jquery-pagination-plugins

    от webdreamer
  • Да, вы правы, в вашем случае нумерация страниц имеет больше смысла.

    от Sven Bieder
  • Вы думали о представлении с вкладками вместо нумерации страниц? Я просто думаю, что разбиение на страницы имеет больше смысла в таких случаях, как сетка, но для разделения полного содержимого, я думаю, что табулятор лучше

    от Sven Bieder
  • 5

    Части этого кода не очень красивые, но я думаю, что это делает работу

    var currentpage = 1;
    var pagecount = 0;
    
    function showpage(page) {
        $('.content').hide();
        $('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show();
        $('#pagin').find('a').removeClass('current').eq(page).addClass('current');
    
    }
    
    $("#pagin").on("click", "a", function(event){
        event.preventDefault();
        if($(this).html() == "next") {
            currentpage++;
        }
        else if($(this).html() == "prev") {
            currentpage--;
        } else {
                currentpage = $(this).html();
        }
        if(currentpage < 1) {currentpage = 1;}
        if(currentpage > pagecount) {currentpage = pagecount;}
        showpage(currentpage);
    });                                                                  
    
    $(document).ready(function() {
        pagecount = Math.floor(($('.content').size()) / 6);
        if (($('.content').size()) % 6 > 0) {
            pagecount++;
        }
    
        $('#pagin').html('<li><a>prev</a></li>');
        for (var i = 1; i <= pagecount; i++) {
            $('#pagin').append('<li><a class="current">' + i + '</a></li>');
        }
        $('#pagin').append('<li><a>next</a></li>');
        showpage(1);
    
    });​
    

  • 21

    Когда запрашивается страница

    спрячьте все элементы содержимого, затем выполните итерацию по ним и покажите те, которые должны появиться на «странице»:

    showPage = function(page) {
        $(".content").hide();
        $(".content").each(function(n) {
            if (n >= pageSize * (page - 1) && n < pageSize * page)
                $(this).show();
        });        
    }
    

    http://jsfiddle.net/jfm9y/184/