Question

我想使用jQuery实现简单的分页。我从jQuery ajax调用中获取了数据，我尝试了同样的操作，但是它不起作用。这是我的工作代码，请告诉我我错过的内容。
Check this fiddle

这是分页代码

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

您的pagecount返回0.25（小于1），因此您的for循环不起作用。使用Math.ceil对您的pagecount进行四舍五入。fiddle在这里工作。

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

Answer 2

Jon，您正在寻找尚未附加到DOM的.portlet。

//编辑：我不确定为什么要查找.line-content而不是代码的一部分。但是我已经将您的代码更改得尽可能小，现在看来可以正常工作。 http://jsfiddle.net/jcq8h7b2/131/

我已经搬走

import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MyComponent } from './mycomponent.component';

export class ParentComponent implements AfterViewInit
{

    @ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>;

    public ngAfterViewInit(): void
    {
        this.childrenComponent.changes.subscribe((comps: QueryList<MyComponent>) =>
        {
            // Now you can access the child component
        });
    }
}

在分页之前，并且我已更改：

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

并且showPage也在寻找错误的类：

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

Answer 3

这是您更新的代码。

//分页

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 4

我制作了一个具有此功能的代码笔。我也会在这里给你一个完整的代码分解。

Codepen

// Here we first declare an array from which we are going to do the pagination.

var animals = [{
    id: 1,
    name: 'Dog',
    type: 'Mammal'
  },
  {
    id: 2,
    name: 'Cat',
    type: 'Mammal'
  },
  {
    id: 3,
    name: 'Goat',
    type: 'Mammal'
  },
  {
    id: 4,
    name: 'Lizard',
    type: 'Reptile'
  },
  {
    id: 5,
    name: 'Frog',
    type: 'Amphibian'
  },
  {
    id: 6,
    name: 'Spider',
    type: 'Arachnid'
  },
  {
    id: 7,
    name: 'Crocodile',
    type: 'Reptile'
  },
  {
    id: 8,
    name: 'Tortoise',
    type: 'Reptile'
  },
  {
    id: 9,
    name: 'Barracuda',
    type: 'Fish'
  },
  {
    id: 10,
    name: 'Sheep',
    type: 'Mammal'
  },
  {
    id: 11,
    name: 'Lion',
    type: 'Mammal'
  },
  {
    id: 12,
    name: 'Seal',
    type: 'Mammal'
  }
];

// Here are some more variables which we would need to paginate between the various items in the array.

var pageSize = 2;
var currentPage = 1;
var pagedResults = [];
var totalResults = animals.length;

// Page Size indicates the amount of items we want on a page.

// Current Page indicates the curren page that is being shown.

// Paged Results indicates an array that contains the section of the animal array, which represents the page.

// Total Results indicates the amount of items in the array.

$(function() {
  function updateList() {

    // Grab the required section of results from the animals list
    var end = (currentPage * pageSize);
    var start = (end - pageSize);
    pagedResults = animals.slice(start, end);

    // Empty the list element before repopulation
    $('#list').empty();

    // Disable the previous button if we are on the first page
    if (currentPage <= 1) {
      $('.previous').prop("disabled", true);
    }

    // Enable the previous button if we are not on the first page
    else {
      $('.previous').prop("disabled", false);
    }

    // Disable the next button if we are on the last page
    if ((currentPage * pageSize) >= totalResults) {
      $('.next').prop("disabled", true);
    }

    // Enable the next button if we are not on the last page
    else {
      $('.next').prop("disabled", false);
    }

    //Loop through the pages results and add them to the list
    $.each(pagedResults, function(index, obj) {
      $('#list').append("<li><strong>" + obj.name + "</strong> (" +
        obj.type + ")</li>");
    });
  }

  //Populate the list on load
  updateList();
  $('.next').click(function() {

    //Only increase the current page if there are enough results
    if ((currentPage * pageSize) <= totalResults) currentPage++;
    updateList();
  });
  $('.previous').click(function() {

    //Only decrease the current page if it is currently greater than 1
    if (currentPage > 1) currentPage--;
    updateList();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="list"></ul>
<button class="previous"> << Previous</button>
<button class="next">Next >></button>

如何使用jQuery添加分页？

4 个答案: