javascript - 如何对 JavaScript 数组进行分页？

Question

我想要对 JavaScript 数组中的数据进行分页。页面上显示的产品数量为3。每3个产品后会有一个分页。但是当我提出请求时，这些页面应该会出现。下面是我带来页面数据的 for 循环示例。

下面是一个示例 JavaScript 数组和小提琴

           //Products 
        var product = [{
        "product_name": "Product 1",
        "product_id": "8991",
        "product_price": "$69",
        categories: [{
            categoryName: 'Tea'
        }, {
            categoryName: 'Coffee'
        }],

    },

    {
        "product_name": "Product 2",
        "product_id": "8951",
        "product_price": "29 TL",
        categories: [{
            categoryName: 'Tea'
        }]


    },
    {
        "product_name": "Product 3",
        "product_id": "8941",
        "product_price": "79 TL",
        categories: [{
            categoryName: 'Gift'
        }, {
            categoryName: 'Coffee'
        }],




    },
    {
        "product_name": "Product 4",
        "product_id": "8931",
        "product_price": "39 TL",
        categories: [{
            categoryName: 'Gift'
        }, {
            categoryName: 'Tea'
        }],



    },
    {
        "product_name": "Product 5",
        "product_id": "8911",
        "product_price": "49 TL",
        categories: [{
            categoryName: 'Gift'
        }],



    },
    {
        "product_name": "Product 6",
        "product_id": "8971",
        "product_price": "59 TL",
        categories: [{
            categoryName: 'Toys'
        }, {
            categoryName: 'Gift'
        }, {
            categoryName: 'Tea'
        }],


    },
    {
        "product_name": "Product 7",
        "product_id": "8921",
        "product_price": "69 TL",
        categories: [{
            categoryName: 'Coffe'
        }, {
            categoryName: 'Kahve'
        }],


    },
    {
        "product_name": "Product 8",
        "product_id": "8431",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },
    {
        "product_name": "Product 9",
        "product_id": "8438",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },
    {
        "product_name": "Product 10",
        "product_id": "8440",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },
    {
        "product_name": "Product 11",
        "product_id": "8441",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },
   {
        "product_name": "Product 12",
        "product_id": "8442",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },

    {
        "product_name": "Product 13",
        "product_id": "8444",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },

    {
        "product_name": "Product 14",
        "product_id": "8445",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },

    {
        "product_name": "Product 15",
        "product_id": "8446",
        "product_price": "19 TL",
        categories: [{
            categoryName: 'Food'
        }],


    },

];

JavaScript 函数

   function getProducts(products = [], categoryName = 'Food') {
                    let result = [];

                    for (let product of products) {
                    if (product.categories === undefined || !Array.isArray(product.categories)) {
                    break;
                    }

            for (let category of product.categories) {
                if (category.categoryName === categoryName) {
                    result.push(product);
                    break;
                }
            }
                    }

            return result;
        }

JavaScript 循环

const categoryName = $(this).data('category');
const products = getProducts(product, categoryName);    


for (let product of products) {
     $(tab).append( "<p>Product name:"+product.product_name+"</p><p>Product Id:"+product.product_id+"</p><p>Price:"+product.product_price+"</p>");
               }

标签： javascriptjquery