Paginer le tableau Javascript

Question

Je suis en train d'essayer d'écrire une fonction JavaScript qui prend un array, page_size et page_number en tant que paramètres et renvoie un tableau qui imite des résultats paginés :

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

donc par exemple, lorsque :

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

la fonction devrait renvoyer : [3, 4].

Toute idée serait appréciée.

Answer 1

Vous pouvez utiliser Array.prototype.slice et simplement fournir les paramètres pour (début, fin).

function paginate(array, page_size, page_number) {
  // les numéros de page lisibles par l'homme commencent généralement par 1, nous déduisons donc 1 dans le premier 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)    // tous les pages
console.log(pages[1]) // deuxième page

Cela retourne un tableau de pages afin que vous puissiez obtenir une certaine page, ou les parcourir toutes.

Answer 3

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

Voici l'exemple.

function paginate(array, page_size, page_number) {
  // les numéros de page lisibles par l'homme commencent généralement par 1, donc nous réduisons 1 dans le premier argument
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}

Il y a quelques choses qui ne vont pas avec cela.

1.) Si le page_number est 0, il essaiera de définir la division de départ à -1 * page_size ce qui renvoie un tableau vide. Donc la valeur minimale de l'attribut page_number devrait être 1, jamais rien de moins à moins que vous ne gériez ce cas dans la fonction.

2.) L'indice de début et de fin de la division sont les mêmes. A cause de cela, vous obtenez un tableau vide. Donc la division 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 est d'utiliser .filter, regardez :

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

        // filtrer
        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() avec l'aide de son deuxième paramètre (l'index de l'élément actuellement traité dans le tableau).

Vous aurez également besoin de la page actuellement sélectionnée et du nombre d'éléments par page à afficher, 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 de selectedPage et/ou de elementsPerPage permettra de retourner les éléments corrects à afficher.