Как я могу добавить нумерацию страниц, используя jQuery?

Question

Я хочу реализовать простую нумерацию страниц, используя jQuery.Я получаю данные из вызова jQuery ajax, я пытался сделать то же самое, но он не работает.Вот мой рабочий код и дайте мне знать, что я пропустил в этом.
Проверьте эту скрипку

Вот код для подкачки

pageSize = 8;
            var pageCount = $(".portlet").length / pageSize;
            for (var i = 0; i < pageCount; i++) {
                $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
            }
            $("#pagin li").first().find("a").addClass("current")
            showPage = function (page) {
                $(".line-content").hide();
                $(".line-content").each(function (n) {
                    if (n >= pageSize * (page - 1) && n < pageSize * page)
                        $(this).show();
                });
            }
            showPage(1);
            $("#pagin li a").click(function () {
                $("#pagin li a").removeClass("current");
                $(this).addClass("current");
                showPage(parseInt($(this).text()))
            });

Answer 1

Джон, вы ищете .portlet, который еще не прикреплен к DOM.

// Редактировать: я не уверен, почему вы ищете .line-контент, который не является частью вашегокод.Но я изменил ваш код как можно меньше, и теперь, кажется, работает.http://jsfiddle.net/jcq8h7b2/131/

Я переместился

$('#container').html(output); 

до нумерации страниц и изменил:

var pageCount = Math.ceil($(".portlet").length / pageSize);

, а также showPage искалнеправильный класс:

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

Answer 2

Вот ваш обновленный код.

// Разбиение на страницы

pageSize = 4;

var pageCount = Math.ceil(data.driver_data.length / pageSize);

for (var i = 0; i < pageCount; i++) {
    $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
}
$("#pagin li").first().find("a").addClass("current")

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

$("#pagin li a").click(function () {
    $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()))
});
$('#container').html(output);
showPage(1);

Здесь JsFiddle

Answer 3

Ваш pagecount возвращает 0,25, что меньше 1, поэтому цикл for не работает.Используйте Math.ceil для округления вашего pagecount Здесь работает скрипка .

 var pageCount = Math.ceil($(".portlet").length / pageSize);
 for (var i = 0; i <= pageCount; i++) {
     $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
 }