Question

我正在尝试对数组进行分页我还很陌生，不知道从哪里开始

我正在尝试对事件列表进行分页，因此该页面仅显示9个事件当还有更多时，您可以单击2或3等以查看更多而且我不知道如何实现分页

function getCity() {
    $.ajax({
        type: "POST",
        url: "City.aspx/GetCity",
        data: JSON.stringify({
            STATEID: countryid,
            ACTION: Action
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        success: function (response) {
            var name = "#selCity";
            var ddl = $(name);
            var Col_Key = "intCityID";
            var Col_val = "strCityName";

            ddl.find('option').remove();
            $(response.d).find("tblCity").each(function () {
                var OptionValue = $(this).find(Col_Key).text();
                var OptionText = $(this).find(Col_val).text();
                var option = $("<option>" + OptionText + "</option>");
                option.attr("value", OptionValue);
                ddl.append(option);
            });
            $(ddl).val('0');
        },
        failure: function (response) {
        }
    });
}

我在看 http://pagination.js.org 和https://www.npmjs.com/package/react-js-pagination

但是我不知道如何实现它。如果有人可以给我一些指示？还是一个简单的例子？

Answer 1

您将需要跟踪一些项目。首先是事件总数。第二个当前页面。每页项目数的三分之一（您要设置的常数）。

然后，您可以对events数组执行任意数量的操作，以仅显示这些项目。

例如，您可以使用数组切片https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice －这将为您提供仅包含所需项目的新数组。

因此，要获得第二页的项目（10-19），您将根据页码和每页的项目数来计算开始索引和结束索引，然后得到类似的结果。

const numberPerPage = 9;
const startIndex = 10; // Computed based on your numbers
const endIndex = startIndex + numPerPage;
const pagedEvents = eventsList.slice(startIndex, endIndex);

这将为您提供仅包含该页面项目的列表。更新页码将导致数字更改和列表更新。

对映射数组分页

1 个答案: