Javascript Girl
  1. Javascript Girl
  3. Comment supprimer les points de suspension dans la pagination de Jquery DataTables?
Intereting Posts
Comment combiner jQuery animé avec les propriétés css3 sans utiliser les transitions css? Erreur de débit lors du passage d'accessoires grâce à des composants ordonnés supérieurs Étiquettes de script multiples par rapport à un seul Affectation des biens d'objets avec destructions? Quelle est la signification des polyfills en HTML5? Obtenir la valeur de ruby ​​dans jquery Extension Chrome: ouvrez la capture d'écran capturée dans un nouvel onglet JQuery remplit automatiquement plusieurs entrées – django-dynamic-formset Document.getElementsByClassName ne fonctionne pas AnguarJS + node.js (web-server.js) supprime hashtag de url et le prend en charge par le côté du serveur Contrôles de validation ASP.NET et boîtes de validation Javascript Comment puis-je construire un objet à l'aide d'un tableau de valeurs pour les paramètres plutôt que de les énumérer en JavaScript? L'opération de "=" en javascript JavaScript: Objet de magasin en tant que valeur fixe? Comment contourner le problème de performance angulaire avec un grand contenu

Comment supprimer les points de suspension dans la pagination de Jquery DataTables?

J'utilise Jquery DataTables (Datatables.net) avec ma grille. Supposons que j'ai 45 pages dans ma grille, donc la pagination par défaut actuelle avec 'full_numbers' montrant les boutons suivants:

Premier, dernier, 1,2,3,4,5, …, 45, suivant, dernier

Maintenant, lorsque je clique sur le bouton de la 5ème page, la pagination affiche les boutons de cette manière:

Premier, Précédent, 1, …, 4,5,6, …, 45, Suivant, Dernier

Je ne veux pas ces ellipses, ce que je veux, c'est lorsque l'utilisateur clique sur la 5ème page, je souhaite afficher les 3 pages suivantes avec 1 page précédente comme ceci:

Premier, Précédent, 4,5,6,7,8, Suivant, Dernier

Donc, finalement, je veux supprimer les ellipses et afficher le numéro de page précédent, le numéro de page actuel et les n chiffres suivants dans ce format:

Tout d'abord, Précédent, {page précédente}, {page actuelle}, {les 3 prochaines pages}, Suivant, Dernier

Existe-t-il un moyen de rendre possible dans DataTables?

PROBLÈME

La dernière version de DataTables 1.10.7 n'a pas cette capacité par défaut.

Il existe des plug-ins de pagination qui fournissent des fonctionnalités supplémentaires, mais malheureusement, aucun d'entre eux ne fournit cette fonctionnalité.

SOLUTION

Nous avons créé des plug-ins de pagination "Full Numbers – No Ellipses" et "Simple Numbers – No Ellipses" pour surmonter ce problème et afficher le contrôle de pagination sans ellipses.

  • Le plug-in «Full numéros – Pas d'Ellipses» se comporte de la même façon que l'option de pagination 'pagingType': 'full_numbers' mais exclut les ellipses.

  • Le plug-in "Simple Numbers – No Ellipses" se comporte de la même façon que l'option de pagination 'pagingType': 'simple_numbers' mais exclut également les points 'pagingType': 'simple_numbers' .

DEMO

Voir l' exemple des numéros complets – Pas de plug-in Ellipses pour la démonstration et de télécharger les deux plug-ins.

COMMENT UTILISER

Pour utiliser le plug-in "Simple Numbers – No Ellipses":

  • Téléchargez simple_numbers_no_ellipses.js
  • jquery.dataTables.min.js après jquery.dataTables.min.js
  • Utilisez 'pagingType': 'simple_numbers_no_ellipses' .

Pour utiliser le plug-in "Full Numbers – No Ellipses":

  • Télécharger full_numbers_no_ellipses.js
  • jquery.dataTables.min.js après jquery.dataTables.min.js
  • Utilisez 'pagingType': 'full_numbers_no_ellipses' .

Par exemple: 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> <script type="text/javascript" src="full_numbers_no_ellipses.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable( { 'pagingType': 'full_numbers_no_ellipses' } ); } ); </script>