Question

我正在尝试编写一个Javascript函数，该函数将array，page_size和page_number作为参数，并返回一个模拟分页结果的数组：

paginate: function (array, page_size, page_number) {
  return result;
}

所以例如：

array = [1, 2, 3, 4, 5],
page size = 2,
page_number = 2,

该函数应返回：[3, 4]。

任何想法都会受到赞赏。

Answer 1

您可以使用Array.prototype.slice并提供(start, end)的参数。

＆＃13;

function paginate (array, page_size, page_number) {
  --page_number; // because pages logically start with 1, but technically with 0
  return array.slice(page_number * page_size, (page_number + 1) * page_size);
}

console.log(paginate([1, 2, 3, 4, 5, 6], 2, 2));
console.log(paginate([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 4, 1));

＆＃13;

Answer 2

这是reduce()的解决方案：

function paginate (arr, size) {
  return arr.reduce((acc, val, i) => {
    let idx = Math.floor(i / size)
    let page = acc[idx] || (acc[idx] = [])
    page.push(val)

    return acc
  }, [])
}

let array = [1, 2, 3, 4, 5]
let page_size = 2
let pages = paginate(array, page_size)

console.log(pages)    // all pages
console.log(pages[1]) // second page

它返回一个页面数组，因此您可以获取某个页面或遍历所有页面。

Answer 3

您可以利用的另一个方法是使用.filter，外观：

const paginate = function (array, index, size) {
        // transform values
        index = Math.abs(parseInt(index));
        index = index > 0 ? index - 1 : index;
        size = parseInt(size);
        size = size < 1 ? 1 : size;

        // filter
        return [...(array.filter((value, n) => {
            return (n >= (index * size)) && (n < ((index+1) * size))
        }))]
    }

var array = [
  {id: "1"}, {id: "2"}, {id: "3"}, {id: "4"}, {id: "5"}, {id: "6"}, {id: "7"}, {id: "8"}, {id: "9"}, {id: "10"}
 ]


var transform = paginate(array, 2, 5);

console.log(transform) // [{"id":"6"},{"id":"7"},{"id":"8"},{"id":"9"},{"id":"10"}]

Answer 4

我在上面看到了一个示例（可以正确地做到这一点），并希望对其进行扩展。

这是例子。

function paginate(array, page_size, page_number) {
  // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}

这有一些问题。

1。）如果page_number为0，则它将尝试在-1 * page_size处设置起始拆分，这将返回一个空数组。因此，page_number attr的最小值应该为1，除非您在函数中处理这种情况，否则不要少。

2。）分割的开始和结束索引相同。因此，您将获得一个空数组。所以拆分应该是：

return array.split(page_number * page_size, page_number * page_size + page_size)

const myArray = [1,2,3,4,5,6,7,8,9,10];

const paginateBad1 = (array, page_size, page_number) => {
  return array.slice((page_number - 1) * page_size, page_number * page_size);
};

const paginateBad2 = (array, page_size, page_number) => {
  return array.slice(page_number * page_size, page_number * page_size);
};

const paginateGood = (array, page_size, page_number) => {
  return array.slice(page_number * page_size, page_number * page_size + page_size);
};

console.log("Bad 1", paginateBad1(myArray, 2, 0));
console.log("Bad 2", paginateBad2(myArray, 2, 1));
console.log("Good", paginateGood(myArray, 2, 1));

Answer 5

使用Array#slice是预期的答案。

我在这里使用Symbol.iterator创建一个iterable。

const arr = [1,2,3,4,5,6,7,8,9,10]

function page({arr, pageSize, pageNumber}) {
    const start = pageSize*(pageNumber-1)
    const end = pageSize*pageNumber
    return {
        *[Symbol.iterator]() {
            for(let i = start; i < arr.length && i < end; i++) {
                yield arr[i]
            }
        }
    }
}

console.log([...page({arr, pageSize: 5, pageNumber: 2})])

Answer 6

您可以在Array.filter()的第二个参数（数组中正在处理的当前元素的索引）的帮助下使用。

您还将需要当前选择的页面以及每页显示的项目数，以便可以找到所需元素的最小和最大索引。

const indexMin = selectedPage * elementsPerPage;
const indexMax = indexMin + elementsPerPage;
const paginatedArray = arrayToPaginate.filter(
  (x, index) => index >= indexMin && index < indexMax
);

更新selectedPage和/或elementsPerPage值将允许返回要显示的正确项目。

Answer 7

对不起，我来晚了，但是我们可以使用Array.splice(start, end)方法，除了这样更简单

const page = 2
const step = 2;
const start = page * step - step;
const end = start + step;

const array = [1,2,3,4,5,6]
console.log(array.splice(start, end))

Answer 8

function paginate(array, page_size, page_number) {
  // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}
var arr = [1, 2, 3, 4, 5, 6]


const options = {
        //page: parseInt(req.query.page) || 1,
        page:1,
        limit:10
        //limit: parseInt(req.query.limit) || 10,
        //customLabels: servCustomLabels,
    };


        let prev_page = 0;
         let next_page = 0;
         let h_p_p = null;
         let h_n_p = null;
         let page_count = Math.ceil((arr.length / options.limit));

        if (options.page >= page_count ){  // 2 3 
            next_page = 0;
        }        
        if(options.page >= 1 && options.page < page_count ){
            next_page = options.page + 1;
            h_n_p = true;
        }else{
            next_page = 0;
            h_n_p = false;
        }

        if(options.page <= 1 ){
            prev_page =0;
            h_p_p = false;
        }else{
            prev_page = options.page -1 ;
            h_p_p = true;
        }
        
        console.log(paginate(arr, 2, 2));
        console.log({paginator: {
                    totalDocs: arr.length,
                    perPage: options.limit,
                    pageCount: page_count,
                    currentPage: options.page,
                    //slNo: 2,
                    hasPrevPage: h_p_p,
                    hasNextPage: h_n_p,
                    prev: prev_page,
                    next: next_page
                }})

Answer 9

function paginate(arr, PerPage) {
  let map = {};
  let startPage = 1;
  arr.forEach((current) => {
    if (map[startPage] && map[startPage].length < PerPage) {
      map[startPage].push(current);
    }

    if (!map[startPage]) {
      map[startPage] = [current];
    }

    if (map[startPage] && map[startPage].length >= PerPage) {
      startPage++;
    }
  });

  return map;

}

you will find an example on this link

Paginate Javascript数组

9 个答案: