Permettez-moi de vous montrer les rendus en premier. Si vous pensez que l'effet est bon, veuillez vous référer au code d'implémentation:
Parce que c'est la première fois que je rédige la pagination en JS, l'écriture ne devrait pas être parfaite. Certains publics ne sont pas extraits, mais ils sont toujours OK à utiliser. Ce code peut être traité comme une pagination publique. J'ai utilisé ce code pour écrire deux paginations légèrement différentes! Les extraits de code communs sont similaires, principalement parce que l'arrière-plan AJAX et les valeurs renvoyés sont différents. Tant que le numéro de page total est obtenu et cliquez sur la page d'accueil / page suivante pour passer correctement la valeur, il n'y aura essentiellement aucun problème avec la pagination.
Il existe en effet de nombreux plug-ins et codes open source sur Internet. Single Book est un singe de développement backend, et le frontend CSS et d'autres styles sont encore incontrôlables, alors j'ai commencé à l'écrire moi-même. En fait, le principe de la pagination est très simple. Il s'agit d'utiliser Ajax pour transmettre des valeurs (numéro de page actuel) à l'arrière-plan, et utiliser la limite pour les paginer en arrière-plan.
Sans plus tarder, téléchargez simplement le code!
Remarque: Ce projet est écrit à l'aide de JS tout au long du processus. Les données de la réception sont obtenues via AJAX, puis assemblées et chargées sur la page dynamiquement.
1. Fixez d'abord les codes de la page précédente, la page suivante, etc. (les valeurs à l'intérieur sont toutes des valeurs pseudo, et ce qui suit sera réaffecté dans JS!)
<ul id = "page"> <li id = "shouye"> <a href = 'javascript: indexpage (1);'> home </a> </li> <li id = "shangyiye"> <a href = 'javascript: indexPage (-1);'> <i> </i> Page précédente </a> </li> <li> <a id = " href = "JavaScript: void (0);" > 1 </a> </li> <li> <a id = "deux" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "trois" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "trois" href = "javascript: void (0);" > 3 </a> </li> <li> <a id = "cinq" href = "javascript: void (0);" > ... </a> </li> <li> <a id = "Fore" href = "javascript: void (0);" > 13855 </a> </li> <li class = 'p-next'> <a href = 'javascript: indexPage (-3);' onclick = "JumptOpage ('2', '/ goches / ajaxquerygoodslist.do.html', '', 'gocheslistContainer', '13855', listPageCallback);"> page suivante <i> </i> </a> href = 'javascript: void (0);' onClick = "indexPage (0);"> dernière page </a> </li> <li> <span id = "span_number"> total 13 855 pages vers le <input type = "text" id = "input_number" /> page <input name = "" value = "identifier" type = "bouton" onclick = "JumptOpage (jQuery ('# input_number'). Val (), '/ goches / ajaxquerygoodslist.do.html', '', 'batterlistContainer', '13855', listPageCallback);" /> </pan> </li> </ul>2. Mettez d'abord deux champs cachés sur la page, l'un est le numéro de page actuel et l'autre est le numéro de page total. Le numéro de page total est la page chargée et la valeur est directement jointe après l'interrogation à partir de l'arrière-plan. S'il n'y a pas de fonctionnement du numéro de page actuel, vous devez attribuer la valeur au numéro de page en cours.
<input id = "jiazai" type = "HIDDEN"> </ entrée> <! - Numéro de page actuel -> <input id = "totalPage" type = "HIDDEN"> </ entrée> <! - Numéro de page total ->
3. Écrivez une fonction qui a été chargée sur la page et attribuer des valeurs au numéro de page total et au numéro de page en cours.
$ (function () {$ ('# jiazai'). Val (1); // attribue le numéro de page actuel, la valeur par défaut est ajaxfunction (page, arg, chipssort, ''); // Cette méthode est la méthode d'accès à l'arrière-plan ajax extrait});4. Méthode Ajax extraite. Cette page utilisera cette méthode plusieurs fois, et tout cela est collecté car les données de la page sont obtenues à partir de l'arrière-plan via AJAX, et l'arrière-plan renvoie une collection de liste.
// La méthode d'extraction de la fonction ajax ajaxfunction (page, arg, chipssort, fontval) {$. Données: {page: page, tri: arg, Chipssort: ChipSort, Fontval: Fontval}, DataType: 'JSON', ContentType: 'Application / X-Www-Form-Urlencoced; CommonFunction (données);}});}3. Il n'y a pas beaucoup de codes à voir, le dernier
// La méthode d'extraction de la fonction d'orthographe de la chaîne CommonFunction (data) {$ ('# projectList'). Find ("li"). Retire (); for (var i = 0; i <data.length; i ++) {/ ***** parce que cette page est chargée dynamiquement, elle effectue principalement l'espace de la chaîne, et il y a beaucoup de code, donc il ne fait pas de poussée et prend principalement de l'espace ***** / <br> est le noyau de la pagination if (data.length> 0) {// set Page Number var Pading = Data [0] .PadingNum; // Numéro de page total $ ('# TotalPage'). Val (Pading); var page = $ ('# jiazai'). Val (); // Page actuelle $ ('# countpage'). id = 'currentpageno'> "+ page +" </b> / "+ pading +" "); $ ('# span_number'). html (" total "+ pading +" page à <entrée type = 'text' id = 'input_number' class = 'page-txtbox' /> <entrée name = '' value = 'déterminé' type = 'bouton' onclick = 'indexpage (-2)' / bourse / ajaxquerygoodslist.do.html ',' ',' gowslistContainer ',' '+ pading + "', listPageCallback); '' class = 'page-btn' /> ")} else {$ ('# countpage'). html (" <b id = 'currentpageno'> "+ 0 +" </b> / "+ 0 +" ");} // Le bas de la page de paramètre est la page d'accueil1 2 3 4 5 6 Last Page var Pading = Data [0] .padingNum; // Numéro de page totale href = "JavaScript: void (0);" var nowpage = $ ('# jiazai'). val (); // page actuelle // one trois cinq avant <br> // Le code suivant semble plus gênant, mais il n'est pas difficile de comprendre que c'est tout le même code, mais il est simplement ajouté des jugements si (NOWPAGE <5 ) {$ ('# one'). text (1); $ ('# one'). att ('href', 'javascrip (3; ttr ('href', 'javascript: pagenum ("' + (4) + '");'); $ ('# Fore'). Texte (5); $ ('# Fore'). Texte (5); $ ('# Fore'). e '). att (' href ',' javascript: pagenum ("'+ (5) +'"); '); $ (' # cinq '). Parent (). show (); $ (' # Fore '). Parent (). Show ();} else {// alert ("Ce n'est pas la cinquième page"); // définir le milieu à la page actuelle $ (' # # #). owPage) -2); $ ('# one'). att ('href', 'javascript: indexPage ("' + (nombre (nowpage) -2) + '");'); $ ('# deux'). + (Nombre (nowpage) -1) + '");'); $ ('# trois'). Text (nowpage); $ ('# trois'). Att ('href', 'javascript: indexPage ("' + (nowpage) + '");'); $ ('# cinq'). Parent (). dépasse le nombre total de pages if (nombre (nowpage) +1> pading) {$ ('# cinq'). parent (). hide (); $ ('# fore'). parent (). hide ();} else {$ ('# cinq'). owpage) +1); $ ('# cinq'). att ('href', 'javascript: indexPage ("' + (nombre (nowpage) +1) + '");');} // juge si la deuxième page de la page suivante dépasse le nombre total de pages si (nombre (cide). lse {$ ('# Fore'). Parent (). Show (); $ ('# Fore'). Texte (numéro (NowPage) +2); $ ('# Fore'). Att ('Href', 'Javascrip et masquer if (pading == 0) {$ ('# one'). parent (). hide (); $ ('# deux'). parent (). hide (); $ ('# trois'). if (pading == 1) {$ ('# shouye'). hide (); $ ('# weiye'). hide (); $ ('# one'). parent (). hide (); $ ('# deux'). . if (pading == 2) {$ ('# one'). parent (). show (); $ ('# deux'). if (pading == 3) {$ ('# one'). parent (). show (); $ ('# deux'). parent (). show (); $ ('# trois'). Parent (). Show (); $ ('# cinq'). if (pading == 4) {$ ('# one'). parent (). show (); $ ('# deux'). parent (). show (); $ ('# trois'). Parent (). Show (); $ ('# cinq'). ) .parent (). show (); $ ('# deux'). Parent (). Show (); $ ('# trois'). Parent (). Show (); $ ('# cinq'). Parent (). Show (); $ ('# Fore'). Parent (). Show ();} // Set a mis en évidence que c'est, 1 est sur la première page, et 2 est sur la deuxième page. a '). Chaque (fonction () {$ (this) .parent (). reroveclass ("current"); if ($ (this) .text () == nowPage) {$ (this) .parent (). addClass ("Current");}}); // Return en haut de la page après la pagit 500); // Enfin, ajoutez 1 $ ('# jiazai'). Val (nombre (Bianlaing) + numéro (1)); }D'accord, la page est terminée ici. Si vous avez besoin de l'utiliser, cela peut prendre un certain temps pour comprendre mon code. En fait, le code n'est pas difficile. Je l'ai utilisé pendant deux heures pour l'écrire. Il suffit de le lire une ligne par un et d'ajouter des commentaires vous-même. Faites passer cette pièce, et ce sera certainement fait dans une demi-heure!