Paginer le tableau Javascript

Question

J'essaie d'écrire une fonction Javascript qui prend un fichier array , page_size et page_number comme paramètres et renvoie un tableau qui imite les résultats paginés :

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

donc par exemple quand :

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

la fonction doit retourner : [3, 4] .

Toute idée serait appréciée.

Answer 1

Vous pouvez utiliser Array.prototype.slice et fournir simplement les paramètres pour (start, end) .

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);
}

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));

Answer 2

Voici une solution avec 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

Elle renvoie un tableau de pages, ce qui vous permet d'obtenir une page particulière ou de les parcourir toutes en boucle.

Answer 3

J'ai vu un exemple ci-dessus qui faisait cela correctement (en quelque sorte) et je voulais le développer.

C'était l'exemple.

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);
}

Il y a plusieurs choses qui ne vont pas dans ce sens.

1.) Si le page_number est égal à 0, alors il essaiera de fixer la division de départ à -1 * page_size qui renvoie un tableau vide. Ainsi, la valeur minimale de la page_number attr doit être 1, jamais moins, sauf si vous gérez ce cas dans la fonction.

2.) L'indice de départ et l'indice d'arrivée de la division sont les mêmes. Pour cette raison, vous obtenez un tableau vide. Donc la séparation devrait être :

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 4

Une autre approche que vous pouvez utiliser, c'est l'utilisation de .filter, look :

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 5

Vous pouvez utiliser Array.filter() à l'aide de son second paramètre (l'index de l'élément courant traité dans le tableau).

Vous aurez également besoin de la page actuellement sélectionnée et du nombre d'éléments à afficher par page, afin de trouver l'index minimum et maximum des éléments nécessaires.

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

La mise à jour de la valeur selectedPage et/ou elementsPerPage permettra de renvoyer les bons éléments à afficher.