Deixe -me mostrar as renderizações primeiro. Se você acha que o efeito é bom, consulte o código de implementação:
Como esta é a primeira vez que escrevo paging no JS, a escrita não deve ser perfeita. Alguns públicos não são extraídos, mas ainda estão bem de usar. Este código pode ser tratado como uma paginação pública. Eu usei esse código para escrever duas paginas ligeiramente diferentes! Os extratos de código comuns são semelhantes, principalmente porque o plano de fundo Ajax e os valores retornados são diferentes. Enquanto o número total da página for obtido e clique na página inicial/próxima página para passar o valor corretamente, basicamente não haverá problema com a paginação.
De fato, existem muitos plug-ins de paginação e códigos de código aberto na Internet. O único livro é um macaco de desenvolvimento de back -end, e o CSS de front -end e outros estilos ainda são incontroláveis, então comecei a escrever. De fato, o princípio da paginação é muito simples. É usar o Ajax para passar valores (número atual da página) para o plano de fundo e usar o limite para paginá -los em segundo plano.
Sem mais delongas, basta enviar o código!
Nota: Este projeto foi escrito usando JS durante todo o processo. Os dados da recepção são obtidos através do Ajax e, em seguida, montados e carregados na página dinamicamente.
1. Primeiro, anexe os códigos da página anterior, a próxima página, etc. (os valores internos são todos pseudo -valores, e o seguinte será reatribuído em JS!)
<ul id = "página"> <li id = "shouye"> <a href = 'javascript: indexpage (1);'> home </a> </li> <li id = "shangyiye"> <a href = 'javascript: indexpage (-1);'> <i> </i> </i> href = "JavaScript: void (0);" > 1 </a> </li> <li> <a id = "dois" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "três" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "três" href = "javascript: void (0);" > 3 </a> </li> <li> <a id = "cinco" 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', '/bens/ajaxquerygoodslist.do.html', '', 'benslistContainer', '13855', listpagecallback); href = 'JavaScript: void (0);' ONCLICK = "IndexPage (0);"> última página </a> </li> <li> <span id = "span_number"> Total 13.855 páginas para o <input type = "text" id = "input_number"/> página <input name = "" value "" type "=" "" " OnClick = "jumptopage (jQuery ('#input_number')2. Primeiro, coloque dois campos ocultos na página, um é o número atual da página e o outro é o número total da página. O número total da página é a página carregada e o valor é anexado diretamente após a consulta do plano de fundo. Se não houver operação do número atual da página, você deverá atribuir o valor ao número atual da página.
<input id = "jiazai" type = "hidden"> </input> <!-número da página atual-> <input id = "totalpage" type = "hidden"> </input> <!-Número da página total->
3. Escreva uma função que tenha sido carregada na página e atribua valores ao número total da página e ao número da página atual.
$ (function () {$ ('#jiazai').4. Método Ajax extraído. Esta página usará esse método várias vezes e tudo é coletado porque os dados da página são obtidos do plano de fundo através do Ajax, e o plano de fundo retorna uma coleção de listas.
// O método de extrair a função Ajax Ajaxfunction (Page, Arg, ChipSort, FontVal) {$. Ajax ({type: 'Post', URL: '/admin/receptionChips/Showlist', // O endereço URL solicitado Dados: {página: página, classificação: arg, chipsSort: chipsort, fontval: fontval}, datatype: 'json', contentType: 'Application/x-www-form-urlencoded;3. Não há muitos códigos para ver, o último
//The method of extracting string spelling function commonfunction(data){$('#projectlist').find("li").remove();for (var i=0;i<data.length;i++ ){ /*****Because this page is loaded dynamically, it mainly performs string spelling, and there is a lot of code, so it does not leak out and take up space*****/<br> }<br> //The beginning is O núcleo da paginação if (data.length> 0) {// Definir número da página var vol = dados [0] .padingnum; // Número total da página $ ('#totalpage'). id = 'currentPageno'> "+página+" </b>/"+pading+" "); $ ('#span_number'). html (" total "+padring+" página para <input type = 'text' id = 'input_number' class = '' página-txtbox '/> página <input =' '' value = '' '' '' '' '' '' '' '' '' ',' '' '). OnClick = 'IndexPage (-2)'/bens/ajaxQuerygoodslist.do.html ',' ',' benslistContainer ',' "+Pading+" ', listPagecallback);' class = 'página-btn'/> ")} else {$ ('#countPage'). html (" <b id = 'currentpageno'> "+0+" </b>/"+0+" ");} // a parte inferior da página de configuração é a página inicial1 3 4 5 6 Última página href = "javascript: void (0);" var nowPage = $ ('#jiazai'). ) {$ ('#um'). Texto (1); $ ('#um'). Att ('href', 'javascript: pagenum ("'+1+'");'); $ ('#dois'). text (2); (3); $ ('#três'). Att ('href', 'javascript: pagenum ("'+(3)+'");'); $ ('#cinco'). Texto (4); $ ('#cinco'). A ttr ('href', 'javascript: pagenum ("'+(4)+'");'); $ ('#fore'). Texto (5); $ ('#fore'). Texto (5); $ ('#Fore'). e '). Att (' href ',' JavaScript: pagenum ("'+(5)+'"); '); $ ('#cinco '). Parent (). Show (); $ ('#Fore '). owpage) -2); $ ('#one'). att ('href', 'javascript: indexpage ("'+(número (nowPage) -2)+'");'); $ ('#dois'. +(Número (NowPage) -1)+'");'); $ ('#três'). Texto (NowPage); $ ('#três'). Att ('href', 'javascript: indexpage ("'+(nowPage)+');'); $ ('#cinco'). Exceda o número total de páginas se (número (NowPage) +1> Pading) {$ ('#cinco'). Parent (). hide (); $ ('#Fore'). Parent (). Hide ();} else {$ ('#cinco'). Parent (). Show (); owpage) +1); $ ('#cinco'). att ('href', 'javascript: indexpage ("'+(número (nowPage) +1)+'");');} // julga se a segunda página da página seguinte excede o número total de páginas if (número (') +2> padring) {$ $ (US $ (') ('), se a segunda página da próxima página (número) ('); LSE {$ ('#Fore'). Parent (). Show (); $ ('#Fore'). Texto (Número (NowPage) +2); $ ('#Fore'). Att ('Href', 'JavaScript: IndexPage ("'+(número (NowPage) +2)+2 e ocultar if (Pading == 0) {$ ('#One'). Parent (). Hide (); $ ('#dois'). Parent (). Hide (); $ ('#três'). Parent (). Hide (); $ ('#cinco') if (Pading == 1) {$ ('#shouye'). hide (); $ ('#weiye'). hide (); $ ('#one'). Parent (). hide (); $ ('#dois'). Parent (pai ( ) .Hide (); $ ('#três'). Parent (). Hide (); $ ('#cinco'). Parent (). Hide (); $ ('#Fore'). Parent (). Hide ();} else if (Pading == 2) {$ ('#One'). Parent (). Show (); $ ('#dois'). Parent (). Show (); $ ('#três'). Parent (). Hide (); $ ('#cinco')) if (Pading == 3) {$ ('#One'). Parent (). Show (); $ ('#dois'). Parent (). Show (); $ ('#três'). Parent (). Show (); $ ('#cinco')) if (Pading == 4) {$ ('#One'). Parent (). Show (); $ ('#dois'). Parent (). Show (); $ ('#três'). Parent (). Show (); $ ('#cinco'); ) .Parent (). Show (); $ ('#dois'). Parent (). Show (); $ ('#três'). Parent (). Show (); $ ('#cinco'). Parent (). Show (); $ ('#Fore'). a '). cada (function () {$ (this) .Parent (). RemoveClass ("Current"); if ($ (this) .Text () == NowPage) {$ (this) .parent (). addclass ("atual");}}); 500); // Finalmente, adicione 1 $ ('#jiazai'). Val (número (Bianlaing)+número (1)); }Ok, a página está concluída aqui. Se você precisar usá -lo, pode demorar um pouco para entender meu código. De fato, o código não é difícil. Eu o usei por duas horas para escrever. Basta ler uma linha por uma e adicionar comentários. Coloque esta peça e isso definitivamente será feito em meia hora!