web-dev-qa-db-fra.com

Meilleure approche pour mettre à jour toutes les entrées d'une liste paginée?

J'ai une liste qui est paginée dans une page Web. Il a également une fonction pour sélectionner le nombre d'entrées par page. Une mise à jour en masse sur tous est requise.

Quelle serait la meilleure approche à ce sujet? Ma préoccupation est qu'un utilisateur doute que nous nous référions à la page actuelle ou à la liste entière. Une fenêtre de confirmation avec des détails ou un message d'information pour le détailler suffirait-elle?

Voici à quoi cela ressemble maintenant:

enter image description here

29
Dan Ovidiu Boncut

Permettez à l'utilisateur de voir combien sont sélectionnés et donnez-leur la possibilité de sélectionner l'ensemble de données au-delà de la pagination.

Gmail a ce modèle. Une fois que vous avez sélectionné "Tous" via la case à cocher, un message apparaît indiquant:

  • Combien sont actuellement sélectionnés
  • Un lien avec le numéro de l'ensemble de données et la possibilité de sélectionner l'ensemble de l'ensemble

enter image description here

enter image description here

41
Mike M

Ajoutez un bouton en bas où se trouvent les autres contrôles de page.

enter image description here

De plus, si les utilisateurs effectuent souvent des changements de masse, envisagez de créer un outil distinct pour cela.

13
moot

La suggestion de Gmail est excellente, mais je voudrais également souligner comment Laravel Nova (et je suis sûr que beaucoup d'autres interfaces utilisateur) le font.

Nova affiche la case à cocher "standard" à sélection multiple en haut de la page, mais en cliquant dessus, vous décochez deux cases. L'un sélectionne tout sur la page, l'autre sélectionne tout ce qui correspond à votre requête. Il indique également le nombre d'éléments qu'il sélectionnera lorsque vous le ferez.

La formulation pourrait être meilleure (par exemple, "Tout sélectionner sur la page/Tout sélectionner") et c'est un peu déroutant de cliquer sur une case à cocher et de ne pas faire vérifier quelque chose immédiatement, mais cela vous oblige à faire un choix conscient sur ce que vous voulez sélectionner.

Laravel Nova Select All UI

La façon de faire de Gmail est excellente, mais la notification que vous n'avez pas tout sélectionné vient après avoir fait une sélection, et personnellement je préfère savoir ce que je sélectionne comme je le sélectionne.

En remarque, si vous vouliez suivre la méthode de Gmail, je suggérerais de faire apparaître la notification dans une couleur appropriée (par exemple le jaune), puis de faire disparaître rapidement ce jaune pour donner un indice visuel à l'utilisateur qu'une nouvelle pièce d'informations à laquelle ils doivent prêter attention s'est manifestée. Voici comment les outils de développement de Google Chrome permettent de montrer qu'un élément du DOM a changé:

Chrome's devtools flash

3
Grayda