Déjame mostrarte las representaciones primero. Si siente que el efecto es bueno, consulte el código de implementación:
Debido a que esta es la primera vez que escribo en JS, la escritura no debería ser perfecta. Algunos públicos no se extraen, pero aún están bien para usar. Este código puede tratarse como una paginación pública. ¡Utilicé este código para escribir dos paginas ligeramente diferentes! Los extractos de código comunes son similares, principalmente porque el fondo AJAX y los valores devueltos son diferentes. Mientras se obtenga el número de página total y haga clic en la página de inicio/página siguiente para pasar el valor correctamente, básicamente no habrá ningún problema con la paginación.
De hecho, hay muchos complementos de paginación y códigos de código abierto en Internet. Un solo libro es un simio de desarrollo de backend, y el CSS frontend y otros estilos aún son incontrolables, así que comencé a escribirlo yo mismo. De hecho, el principio de la paginación es muy simple. Es para usar AJAX para pasar los valores (número de página actual) en el fondo y usar el límite para paginarlos en segundo plano.
Sin más preámbulos, ¡solo suba el código!
Nota: Este proyecto está escrito utilizando JS en todo el proceso. Los datos de la recepción se obtienen a través de AJAX, y luego se ensambla y cargan dinámicamente la página.
1. Primero adjunte los códigos de la página anterior, la página siguiente, etc. (los valores dentro son todos los valores de pseudo, y los siguientes se reasignará en 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> Página anterior </a> </li> <li> <a id = " href = "javascript: void (0);" > 1 </a> </li> <li> <a id = "two" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "tres" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "tres" href = "javascript: void (0);" > 3 </a> </li> <li> <a id = "cinco" href = "javascript: void (0);" > ... </a> </li> <li> <a id = "front" href = "javascript: void (0);" > 13855 </a> </li> <li class = 'p-next'> <a href = 'javascript: indexpage (-3);' onClick = "JUMPTOPAGE ('2', '/BEODS/AJAXQUQUERYGOODSLIST.DO.HTML', '', 'BEOTSLISTCONTAINER', '13855', ListPageCallback);"> Página siguiente <i> </i> </a> </li> <li> <li id = "WeiYe" class = 'P -nex href = 'javascript: void (0);' onClick = "indexpage (0);"> Última página </a> </li> <li> <span id = "span_number"> total 13,855 páginas al <input type = "text" id = "input_number"/> página <input name = "" value = "identificar" tipo = "botón" " onClick = "jumpptoPage (jQuery ('#input_number'). val (), '/bien2. Primero coloque dos campos ocultos en la página, uno es el número de página actual y el otro es el número de página total. El número de página total es la página cargada y el valor se adjunta directamente después de consultar desde el fondo. Si no hay operación del número de página actual, debe asignar el valor al número de página actual.
<input id = "jiazai" type = "Hidden"> </ input> <!-Número de página actual-> <input id = "totalPage" type = "Hidden"> </input> <!-Número de página total->
3. Escriba una función que se haya cargado en la página y asigne valores al número de página total y el número de página actual.
$ (function () {$ ('#jiazai'). Val (1); // Asigna el número de página actual, el valor predeterminado es AjaxFunction (Page, Arg, ChipsSort, ''); // Este método es el método de acceso de fondo AJAX extraído});4. Método AJAX extraído. Esta página utilizará este método varias veces, y todo se recopila porque los datos de la página se obtienen desde el fondo a través de AJAX, y el fondo devuelve una recopilación de listas.
// El método para extraer la función Ajax AjaxFunction (Page, Arg, Chipssort, Fontval) {$. Ajax ({Tipo: 'Post', url: '/admin/receptionChips/showList', // La dirección de url solicitada Datos: {página: página, sort: arg, chipssort: chipsort, fontval: fontval}, dataType: 'json', contentType: 'Application/x-www-form-urlencoded; CommonFunction (datos);}});}3. No hay muchos códigos para ver, el último
// El método para extraer la función de ortografía de cadena CommonFunction (data) {$ ('#ProjectList'). Find ("Li"). Remove (); for (var i = 0; i <data.length; i ++) {/***** Porque esta página está cargada dinámicamente, realiza principalmente ortografía de cadena, y hay un montón de codificación, por lo que no se filtre y toma espacio *******/<br> es el núcleo de paginación if (data.length> 0) {// establece el número de página var pading = data [0] .padingnum; // número de página total $ ('#totalpage'). val (pading); var page = $ ('#jiazai'). val (); // página actual $ (#countpage '). id = 'CurrentPageno'> "+Page+" </b>/"+pading+" "); $ ('#span_number'). Html (" total "+pading+" página a <input type = 'text' id = 'input_number' class = 'Page-txtbox'/> Page <input name = '' valor = 'determinado' type = 'butin' '' Botón '' ' onClick = 'indexpage (-2)'/bienes/ajaxQuerygoodslist.do.html ',' ',' GoodsListContainer ',' "+pading+" ', listPageCallback);' class = 'Page-btn'/> ")} else {$ ('#CountPage'). href = "javascript: void (0);" var nowpage = $ ('#jiazai'). val (); // página actual // uno dos tres cinco fronteras <br> // El siguiente código parece más problemático, pero no es difícil entender que es todo el mismo código, pero solo se agrega algunos juicios si (NowPage <5 <5 5 ) {$ ('#un'). Text (1); $ ('#one'). attr ('href', 'javaScript: pageNum ("'+1+'");'); $ ('#dos'). Text (2); $ ('#dos'). attr ('href', 'JavaScript: PageNum ('+(2); ');' ('#'#('#('#('#('#('('#('('#('('#('('#('(' '); (3); $ (''#tres '). Attr (' href ',' javaScript: pagenum ("'+(3)+'"); '); $ ('#cinco '). Text (4); $ ('#cinco '). A. A. ttr ('href', 'javaScript: pagenum ("'+(4)+'");'); $ ('#front'). Text (5); $ ('#front'). Text (5); $ ('#front'). E '). owpage) -2); $ ('##one'). attr ('href', 'javaScript: indexpage ("'+(number (nowpage) -2)+'");'); $ ('#dos'). Text (Number (NowPage) -1); $ ('#dos'). ATtr ('href', 'javaScript: inCEXPAGE ("' '' ' +(Número (nowpage) -1)+'");'); $ ('#tres'). Text (NowPage); $ ('#tres'). Attr ('href', 'javaScript: induxpage ("'+(nowPage)+'");'); $ ('#cinco'). excede el número total de páginas if (número (nowpage) +1> pading) {$ ('#cinco'). parent (). hide (); $ ('#front'). parent (). hide ();} else {$ ('#cinco'). parent (). show (); $ ('#cinco'). Text (number (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n (n owpage) +1); $ ('#cinco'). attr ('href', 'javaScript: indeSpage ("'+(number (nowpage) +1)+'");');} // juzga si la segunda página de la página siguiente excede lse {$ ('#front'). parent (). show (); $ ('#front'). Text (number (nowpage) +2); $ ('#front'). attr ('href', 'javascript: inDeXpage ("'+(number (nowpage) +2)+''"); ');}} // si el número total de pagas es menos de 5, este código) y esconder if (pading == 0) {$ ('#one'). parent (). hide (); $ ('#dos'). Parent (). Hide (); $ ('#tres'). Parent (). Hide (); $ ('#cinco'). Parent (). Hide (); $ ('#Fore'). Parent (). Hide ();} if (pading == 1) {$ ('#shouye'). hide (); $ ('#weiye'). hide (); $ ('#one'). parent (). hide (); $ ('#dos'). parent ((parent (( ) .Hide (); $ ('#tres'). Parent (). Hide (); $ ('#cinco'). Parent (). Hide (); $ ('#front'). Parent (). Hide ();} más if (pading == 2) {$ ('#un'). Parent (). show (); $ ('#dos'). Parent (). show (); $ ('#tres'). Parent (). Hide (); $ ('#cinco'). Parent (). if (pading == 3) {$ ('#un'). parent (). show (); $ ('#dos'). Parent (). show (); $ ('#tres'). Parent (). show (); $ ('#cinco'). Parent (). if (pading == 4) {$ ('#un'). parent (). show (); $ ('#dos'). Parent (). show (); $ ('#tres'). Parent (). show (); $ ('#cinco'). Parent (). ) .Parent (). show (); $ ('#dos'). Parent (). show (); $ ('#tres'). Parent (). show (); $ ('#cinco'). Parent (). show (); $ ('#front'). parent (). show ();} // Estable a '). Cada (function () {$ (this) .Parent (). RemoveClass ("actual"); if ($ (this) .Text () == NowPage) {$ (this) .Parent (). addClass ("actual");}}); // return a la parte superior de la página después de PAGAG 500); // Finalmente, agregue 1 $ ('#jiazai'). Val (número (bianlaing)+número (1)); }Bien, la página se completa aquí. Si necesita usarlo, puede llevar un tiempo comprender mi código. De hecho, el código no es difícil. Lo usé durante dos horas para escribirlo. Simplemente léelo una línea por una y agregue comentarios usted mismo. ¡Haga esta pieza, y definitivamente se hará en media hora!