A arquitetura de três camadas Javaee implementa a consulta de paginação de Ajax
Ambiente de Desenvolvimento:
Etapa 1: Preparação da implementação do código
Existem muitas postagens na Internet ao desenvolver um trabalho de configuração preliminar na Idea, para que não a repetirei aqui. Eu falo principalmente sobre três pontos.
Na configuração do servidor, você precisa selecionar as classes e o recurso de atualização para os dois itens na caixa vermelha. Depois de selecionar, você pode obter implantação a quente.
Para preencher o nome do projeto aqui. Como o caminho raiz do projeto
A maneira de importar o pacote JAR é mostrada na figura. Clique no sinal de mais na dependência e selecione a pasta Lib que você criou.
Importar pacotes de jar relacionados: pacote de jar c3p0, pacote de jar da classe de ferramentas dbutils, pacote fastjson jar, pacote de jar de driver mysql
Escreva os seguintes dados na tabela de produtos do banco de dados Test03
Subcontratando o projeto em Idea e importar a configuração do pool de conexão C3P0
Observe que o arquivo de configuração C3P0 deve ser modificado em seu próprio nome de banco de dados e senha do banco de dados
No pacote de domínio, crie a classe de entidade do produto, escreva as propriedades correspondentes na classe de produto com base nos campos da tabela de produtos no banco de dados. Gerar o método GET Set.
Crie uma classe de ferramentas para obter objetos de pool de conexão
Etapa 2: Consulte todas as informações do produto sem pagar
Ideias de implementação:
JSP/HTML -----> servlet (a camada da web lida com dados de solicitações e resposta) -------------------> Service (Logic de processamento de camada de serviço) ---------------------> Dao (Dao Layer lida com operações de banco de dados)
Crie uma página do produto e envie uma solicitação para o servidor (obtenha todas as informações do produto)
O front-end usa o desenvolvimento responsivo do Bootstrap, o que pode tornar a página mais bonita e o desenvolvimento é mais conveniente.
O código para as informações da página é o seguinte:
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <title> Lista de exibição do produto </ititle> <!-Introduce arquivos relacionados ao bootstrap-> <link Rel = "StyleSheet" href = "/ajaxx_product/slotsTrap/cs cs/cs" Nofollow "> <script type =" text/javascript "src ="/ajax_product/bootstrap/js/jQuery-1.11.3.js "> </script> <script type =" text/javaScript "src ="/ajax_product/bootsp/js/bootscript "src ="/ajax> type = "text/javascript"> // Quando a página está carregando, uma solicitação é enviada ao servidor para receber todos os dados do produto $ (function () { //========================================================================================================= =========================================================================================================== =========================================================================================================== ============================================================================================================ // Analise todos os dados transmitidos do servidor // ======================================================= Mostrar informações do produto para a tabela var Product (Data); = $ ("<tr> <td>"+produtos [i] .id+"</td> <td>"+produtos [i] .name+"</td> <td>"+produtos [i] .count+"</td> <td>"+produtos [i] .Price+"</td> </td>" $ ("#guia"). Appender (protd); id = "tab"> <tr> <th> número </th> <th> nome do produto </th> <th> quantidade </th> <th> Quantidade do produto </th> <th> Preço unitário do produto </th> </tr> </ table> </div> </div> </div> </body> </html>Crie um servlet para receber solicitações e obter todas as informações do produto
Na idéia, crie um servlet como mostrado na figura a seguir
Gerar anotações automaticamente sem verificar aqui
Depois de clicar em OK, a Idea pulará automaticamente para o arquivo web.xml e gravará automaticamente o nome do caminho completo do servlet, basta escrever o padrão de URL.
Observe que o padrão de URL precisa ser escrito consistente com o servlet na solicitação AJAX.
O código do servlet da camada da web é o seguinte:
package com.thc.web;import com.alibaba.fastjson.JSONObject;import com.thc.service.ProductService;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.SQLException;import java.util.List;public class Product extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Lidar com o Código de Código de Codificado. Response.setContentType ("Texto/html; charset = utf-8"); // Como exibe todas as informações do produto, não há parâmetro para receber // A camada de serviço precisa chamar o método para encontrar todos os dados, obter o resultado e responder ao serviço do cliente do produto Products Service = new ProduckerService (); tente {// Chame os métodos da camada de negócios para obter toda a lista de produtos <com.thc.domain.product> allProuct = service.findallProuct (); // converte os dados obtidos em JSON Type Data String jSonstring = jsonObject.TojSonstring (AllProuct); // Escreva de volta ao navegador Response.getWriter (). Write (JSonstring); } catch (sqLexception e) {e.printStackTrace (); }} Void protegido Doget (solicitação httpServletRequest, httpServletResponse resposta) lança servletexception, ioexception {dopost (request, resposta); }}Na camada de serviço, obtenha dados da camada DAO e devolva -os ao servlet na camada da web
O código para chamar a camada de serviço na camada da web é a seguinte
pacote com.thc.service; importar com.thc.dao.productdao; importação com.thc.domain.product; importar java.sql.sqLexception; importar java.util.list; public class PRODERSERVICE {// Na camada de serviço, obtenha dados da camada dao e retorna os dados de retorno para os dados da camada de serviço, obtenha os dados da camada da Dao e retornam para os dados da camada de serviço, obtenha os dados da camada e retorna para os dados ProductDao Dao = new ProductDao (); // chamando a camada DAO para consultar todos os produtos da lista de produtos <Product> allProduct = dao.findallProduct (); devolver allproduct; }}Consulta dados do servidor na camada DAO e dê a camada de serviço
pacote com.thc.dao; importação com.thc.domain.product; importar com.thc.utils.jdbcutils; importar org.apache.commons.dbutils.QueryRunner; importação; importação.apache.commons.dbuts.handlers.beanlishandler; importação java.commons.dbuts.handlers.beanlishandler; java.util.List; // ======================================= A camada dao é especificamente responsável por operações de banco de dados Public Class PRODUCTDAO {// ============= Query All PRODUTO dbutils para criar o queryrunner core objeto queryrunner qr = new Queryrunner (jdbcutils.getDataSource ()); // Escreva a instrução SQL para consultar todos os produtos String sql = "Selecione * FROM PRODUTO"; // converte o produto no produto em uma coleção de listas, e a lista genérica para a lista de produtos <Product> Products = Qr.Query (SQL, New Beanlisthandler <> (Product.class)); produtos de retorno; }}Depois que a camada DAO recebe os dados, ele o passa para a camada de serviço. A camada de serviço passa para o servlet da camada da web. Depois que o servlet recebe os dados, ele é salvo na coleção de listas e depois converte a coleção de listas em um tipo de dados JSON e o grava no navegador. O código a seguir na página front-end é analisar os dados JSON retornados pelo servlet
$ .Post (URL, função (dados) {// Analise todos os dados transmitidos a partir do servidor // ========================================================= ================================================================ =============================================================== ================================================================ =============================================================== ================================================================ =============================================================== ================================================================ e adicione à tabela, adicione dados à tabela $ ("#guia"). Append (protd);Através da ferramenta de captura de pacotes fornecida pelo Google Chrome, você pode ver os dados da resposta do servlet
Copie todos os dados de resposta, que são os seguintes dados. Uma matriz tem o objeto de produto aninhado.
Todos os objetos existem na forma de pares de valor-chave.
Por exemplo, nos primeiros dados, a chave é a contagem e o valor é 100. A chave é ID, o valor é 1, a chave é o nome, o valor é TV, a chave é o preço, o valor é 2000
[{"count": 100, "id": 1, "nome": "tv", "preço": 2000}, {"count": 200, "id": 2, "nome": "máquina de lavar", "preço": 1000}, {"contagem": 300, "id": 3, "name": "ar condicionado", "preço": 3000}: 3000}: 300, 300, "id": 3, "Nome": "ar condicionado", "preço": {"count":50,"id":4,"name":"Projector","price":2000}, {"count":1000,"id":5,"name":"HP computer","price":4000}, {"count":100,"id":6,"name":"Apple phone","price":5000}, {"count": 60, "id": 7, "nome": "máquina de costura", "preço": 2000}, {"count": 100, "id": 8, "name": "xiaomi box", "preço": "2200}, {" contagem ": 300," id ":" name ":" dispensador "," price ":" 200: "200:" {"count": 300, "id": 9, "name": "dispensador", "Price": " {"count":200,"id":10,"name":"Water purifier","price":2000}, {"count":500,"id":11,"name":"Electric Heater","price":2000}, {"count":100,"id":12,"name":"Juicker","price":399}, {"count": 200, "id": 13, "nome": "panela de pressão elétrica", "preço": 498}, {"count": 300, "id": 14, "nome": "fogão de arroz9," preços ":" 299}, {"count": 50, "Id": 15, "Nome": "Microw": " {"count": 200, "id": 16, "nome": "fabricante de leite de soja", "preço": 199}, {"count": 300, "id": 17, "nome": "fogão de indução", "preço": 398}, {"rount": 500, "id": 18: "name": "Humidifier" " {"count": 250, "id": 19, "nome": "Razor", "Price": 98}, {"count": 1000, "Id": 20, "Name": "Safety", "Price": 16.5}, {"contagem": 1200, "Id", "Nome": "diapai" ":" 8.8: "{1200," Id "," Nome ":" Diapai "": "8.8:"}: "Id", "21," Nome ":" Diapai "": {"count": 1500, "id": 22, "nome": "libai", "preço": 9.9}]Sem paginação, o efeito da exibição é o seguinte:
Todos os dados são exibidos em uma página. Se houver muitos dados, por exemplo, procurando uma palavra -chave no Baidu, pode haver dezenas de milhares ou centenas de milhões deles. Demora muito tempo para obter tantos resultados do banco de dados e dar muito ao navegador. A experiência do usuário é extremamente ruim, portanto, a tecnologia de paginação é necessária. Pagagem física é usada.
Consulte apenas as informações necessárias para a página atual do banco de dados por vez.
Etapa 3: Passe o número atual de páginas e o número de páginas exibidas no servidor
A página HTML precisa aumentar o número atual de páginas e o número de páginas exibidas por página e passá -la para o servidor
Altere o código como mostrado na figura a seguir:
Na camada do servlet, os parâmetros precisam ser recebidos e os dados correspondentes da página atual são consultados da camada de serviço. O código é o seguinte:
A classe pública Produto estende o httpServlet {Protected void DoPost (solicitação HttpServletRequest, HttpServletResponse Response) lança servletexception, ioexception {// lidera com o código de código Gledled. Response.setContentType ("Texto/html; charset = utf-8"); // a página atual int pageno = Integer.parseint (request.getParameter ("pageno")); // o número de entradas exibidas por página int PAGESIZE = INTEGER.PARSEINT (request.getParameter ("Pagesize")); // Como exibe todas as informações do produto, não há parâmetro para receber // A camada de serviço precisa chamar o método para encontrar todos os dados, obter o resultado e responder ao serviço do cliente do produto Products Service = new ProduckerService (); tente {// De acordo com o número de páginas exibidas e cada página, obtenha dados da lista de camadas de serviço <com.thc.domain.product> Product = Service.findProduct (Pageno, Pagesize); String jSonstring = jsonObject.tojSonstring (Product); // Escreva de volta ao navegador Response.getWriter (). Write (JSonstring); } catch (sqLexception e) {e.printStackTrace (); }} Void protegido Doget (solicitação httpServletRequest, httpServletResponse resposta) lança servletexception, ioexception {dopost (request, resposta); }}Novo método de encontrar dados atuais da página adicionados na camada de serviço
Lista pública <CROTTER> FindProduct (Int Pageno, Int Pagesize) lança SqLexception {ProductDao Dao = new ProductDao (); List <Product> Product = Dao.findProduct (Pageno, PageSize); produto de retorno; }O novo método de encontrar a página atual do banco de dados adicionada na camada DAO
Lista pública <CROTTER> findProduct (int pageno, int PageSize) lança SqLexception {queryrunner qr = new Queryrunner (jdbcutils.getDataSource ()); String sql = "selecione * do limite do produto? ,?"; // Limite o primeiro parâmetro: Inicie de onde no banco de dados, o índice começa a partir de 0 // o segundo parâmetro: quantas verifica cada vez que a regra do primeiro parâmetro é: subtrair o número atual de páginas por uma, multiplicar por número de consultas por página <> productList = qr.Query (sql, NewliThandler <> productList = qr.Query (Sql, Newllishandler <> productList = qr.Query (Sql, NewliThandler <> PageSize); Retornar ProductList; }O lateral do navegador é exibido como mostrado na figura abaixo: apenas as informações do produto com o PageSize (o valor atual é 6) serão exibidas por vez.
No entanto, não é possível girar dinamicamente as páginas clicando no botão da página.
Então precisamos considerar como a página exibe a barra de paginação e como os dados devem ser encapsulados?
Sabemos que o número de páginas exibidas na barra de paginação da página é alterado dinamicamente . O número total de páginas = o número total de dados/dados exibidos em cada página deve ser arredondado para cima. Em outras palavras, além dos dados da lista <Product>, nossa página também precisa do número total de dados, do número total de páginas, da página atual e do número de exibições por página. Além disso, o pageno na página atual também muda dinamicamente. Quantas páginas são clicadas na página? Pageno é o número de pageno. Portanto, precisamos criar outro Javabean (PageBean.java) para encapsular esses dados e convertê -los em dados JSON e enviá -los ao cliente para exibi -los.
Etapa 4: encapsular os dados relevantes da página em um Javabean
Crie uma classe chamada PageBean no pacote de domínio, com as seguintes propriedades:
private Int pageno; // número atual do número privado int PageSize; // O número de exibição em cada página private int totalCount; // Quantos dados de informações do produto existem no total privado int totalpage; // Quantas páginas de dados existem no total de produtos privados <Product> Products; // Definir dados do produto Dados
Passe o número atual de páginas (Pageno) na camada de serviço e o número de páginas exibidas em cada página (PageSize) e retorne um PageBean à camada da Web.
O código final da camada da web é o seguinte
A classe pública Produto estende o httpServlet {Protected void DoPost (solicitação HttpServletRequest, HttpServletResponse Response) lança servletexception, ioexception {// lidera com o código de código Gledled. Response.setContentType ("Texto/html; charset = utf-8"); // a página atual int pageno = Integer.parseint (request.getParameter ("pageno")); // o número de entradas exibidas por página int PAGESIZE = INTEGER.PARSEINT (request.getParameter ("Pagesize")); // Como exibe todas as informações do produto, não há parâmetro para receber // A camada de serviço precisa chamar o método para encontrar todos os dados, obter o resultado e responder ao serviço do cliente do produto Products Service = new ProduckerService (); tente { /* Chame o método da camada de negócios para obter todos os produtos da lista de produtos <com.thc.domain.product> allprouct = service.findallprouct (); Converta os dados obtidos em JSON Type Data String jSonstring = jsonObject.TojSonstring (AllProuct);*/// Fetch dados da camada de serviço com base na página atual e no número exibido em cada página // list <com.thc.domain.product> Product = Service.findproduct (Pageno, Pagesize); // ========================================================================= PageBean = Service.FindPageInfo (Pages; // ================================================================= ===================================================================== ===================================================================== ===================================================================== jSonstring = jsonObject.tojSonstring (PageBean); // ========================================================================= Resposta.GetWriter (). } catch (sqLexception e) {e.printStackTrace (); }} Void protegido Doget (solicitação httpServletRequest, httpServletResponse resposta) lança servletexception, ioexception {dopost (request, resposta); }}No serviço, você precisa obter todas as informações do PageBean, e Pageno e PageSize são conhecidos. Você precisa obter os dados de informações do produto e listar a coleta da camada DAO e também precisa obter o total de dados de informações do produto. Quantas páginas podem ser divididas pelo total de dados pelos dados exibidos em cada página e arredondados para cima.
O código final da camada de serviço é o seguinte:
classe pública ProductService {// Na camada de serviço, obtenha dados da camada DAO e retorne os dados à camada da web // ===================================== Lista pública <Production> FindAllProuct () Throws SqLexception {ProductDa; // chamando a camada DAO para consultar todos os produtos da lista de produtos <Product> allProduct = dao.findallProduct (); devolver allproduct; } // ======================================================================== Lista de publics <Product> Find) ProductDao (); List <Product> Product = Dao.findProduct (Pageno, PageSize); produto de retorno; } // =========================================================================== PageBean FindinFo (IntGeNoTeno, INTages, Int Pagansons, Intgages, Int Pagansons) ProductDao (); List <Product> Product = Dao.findProduct (Pageno, PageSize); int totalCount = dao.findtotalCount (); PageBean pb = new PageBean (); // encapsular dados pb.setTotalCount (TotalCount); pb.setPageno (Pageno); pb.setPagesize (PageSize); pb.setProducts (Produto); // a partir de cima e calcule o número total de páginas. Não se esqueça de se multiplicar por 1.0, caso contrário, uma página de dados estará ausente int totalpage = (int) math.ceil (totalCount*1.0/pagageSize); pb.setToTalPage (TotalPage); // fornece os dados ao servlet retornar PB; }}Na camada DAO, um novo método é adicionado para consultar o número total de informações do banco de dados.
O código final da camada DAO é o seguinte
// ============================= A camada DAO é especificamente responsável pelas operações de banco de dados Public class PRODUCTDAO {// ============ Perceber todas as informações do produto Public List <ProductLodlProduct () Throws SqLexception {///temery All TODRATION DBR) New Queryrunner (jdbcutils.getDataSource ()); // Escreva instruções SQL para consultar todos os produtos String sql = "Selecione * FROM PRODUTO"; // converte o produto na coleção de listas, e o genérico para o produto é a lista de produtos <Product> Products = Qr.Query (SQL, New BeanlistHandler <> (Product.class)); produtos de retorno; } // ================================================= Lista pública <Product> findProduct (Int Pageno, Int Pagesize) Throws Sqception {QueryRunner. String sql = "selecione * do limite do produto? ,?"; // Limite o primeiro parâmetro: onde iniciar no banco de dados, o índice começa a partir de 0 // o segundo parâmetro: quantos cada vez que você verifica // a regra do primeiro parâmetro é: subtrair o número atual de páginas por uma, multiplicar por número de consultas por página <> productList = qr.Query (SQL, Newllishandler <> productList = qr.Query (SQL, Newllishandler <> PageSize); Retornar ProductList; } // ============== Quantas peças de dados existem na consulta? ============================== Public int findTotalCount () lança sqLexception {queryrunner qr = new Queryrunner (jdbcutils.getdatasource ()); String sql = "selecione count (*) do produto"; Long countl = (long) qr.Query (SQL, new ScalarHandler ()); retorno contountl.IntValue (); }}Etapa 5: Processe a página front-end
Sob a tag da tabela, adicione uma linha para fornecer o componente de paginação. Comente o código LI porque ele precisa ser exibido dinamicamente.
Declare as variáveis de parâmetro a serem recebidas primeiro
var url = "/ajax_product/produto"; var pageno = 1; // A página atual é definida como 1Var pagageSize = 6; // em cada página exibe 6 informações do produto var totalpage; // quantas páginas de dados existem no total de produtos var; // informações do produto Informações sobre dados do produto Informações
Depois de escrever a solicitação de postagem do AJAX, o pacote de captura testa se o navegador recebe dados.
$ .post (url, // o endereço dos dados transmitidos ao servidor {"pageno": pageno, "pageSize": PageSize}, // o número atual de páginas e o número de peças exibidas por função de página (dados) {})Eu recebi os seguintes dados depois de pegar o pacote
{"pageNo":1, "pageSize":6, "products":[{"count":100,"id":1,"name":"TV","price":2000}, {"count":200,"id":2,"name":"washing machine","price":1000}, {"count":300,"id":3,"name":"Air Condicionador "," Preço ": 3000}, {" count ": 50," ID ": 4," Nome ":" Projector "," Price ": 2000}, {" count ": 1000," Id ": 5," Nome ":" HP Computer "" Nome ": 4000}," contagem ":" 100, "id": 6, "" "" Nome "": 4000}, "contagem": 100: 100, "id": 6, "" "" ": 4000}," contagem ":" 100, "id": 6, "" "" "": 4000}, "contagem": 100: 100: "Id": 6, "" "" ". "TotalCount": 22, "TotalPage": 3}Isso significa que o lado do servidor pode responder ao navegador normalmente. Em seguida, escreva o código do front-end
Exibir dados na tabela
Primeiro analise os dados obtidos pelo back -end e depois sincronize -os no código JS, obtenha uma matriz de dados de todos os objetos do produto através do PageBean.Products, depois itera através dessa matriz e consiga o valor do atributo do produto na tabela.
O código é o seguinte
$ .Post (url, // o endereço dos dados transmitidos ao servidor {"pageno": pageno, "Pagesize": PageSize}, // O número atual de páginas e o número de peças exibidas por página são transmitidas para o navegador, o tipo de função (dados) {// analisa todos os dados pagean transmissidos do servidor, o formato é json json (dados) {// analisar todos os dados da página transmitida do servidor, o formato é json; Pageno = PageBean.pageno; =============================================================================================== =============================================================================================== =============================================================================================== =============================================================================================== para (var i = 0; i <products.length; i ++) {// transfira dados var protestd = $ ("<tr> <td>"+produtos [i] .id+"</td> <td>"+produtos [i] .name+"</td> <td>"+produtos [i]. </tr> "); // Adicionar à tabela, adicione dados à tabela $ ("#tab "). Append (protd);}}," json ")Depois de escrever este código, o servidor pode ser ativado para testar se os dados podem ser obtidos na tabela. Os dados são exibidos com sucesso após o teste.
Exibir os dados da barra de página
Primeiro exiba os dados da página anterior e a próxima página
/Mostra os dados da barra de página // que não considera a função, ele pode ser exibido primeiro // mostrar a página anterior var preli = $ ('<li> <a href = "#" rel = "nofollow externo" rel = "nofollow externo" Rel = "externo" Nofollow "rel =" Nofollow externo "Rel =" Nofollow "[Rel =" NOFLIGHT " $ (". Pager"). Anexar (preli); // Mostre a próxima página var nextli = $ ('<li> <a href = "#" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo", "não $ (". Pager"). Append (Nextli);Os resultados dos testes são os seguintes:
Dados do número da página de exibição:
/Mostra os dados da barra de páginas // que não está considerando a função, ele pode ser exibido primeiro // mostrar a página anterior var preli = $ ('<li> <a href = "#" rel = "nofollow externo" rel = "nofollow externo" rel = "externo" nofollow "rel =" nofollow "externo" r = "nofollow" página </a> </li> '); // Adicione $ (". Pager"). Append (preli); // viaja sobre o número da página para (var i = 1; i <= totalpage; i ++) {// Crie tag li var li = $ (' <li> <a href = ""#"=" externo sollows sollow "" Nofollow "rel =" Nofollow externo "> '+i+' </a> </li> '); // Adicione ao UL através do seletor de classe $ (". Pager"). Append (li);} // Mostra a próxima página var nextli = $ ('<li> <a href = "#" rel = "externo" não > Próxima página </a> </li> '); // adicione $ (". Pager"). Append (Nextli);O efeito é mostrado na figura abaixo:
A página atual é destacada
Como a classe Pager não suporta destaque no bootstrap, a classe de paginação é substituída por paginação.
A lógica do destaque é determinar se é a página atual (Pageno) ao atravessar.
Adicione o atributo ativo da classe à tag li
// transfira o número da página para (var i = 1; i <= totalpage; i ++) {var li; if (i === pageno) {// =============== É a página atual, destaque li = $ ('<li> <a href = "#" rel = "externo nofollow" rel = "externo" nOfollow "Rel =" Nofollow "Rel =" "nOfollow" = "externo" NOFIXO "=" // Adicionar ao UL através do seletor de classe $ (". } else {// =========== Não é a página atual, não destaque li = $ ('<li> <a href = "#" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow" Rel = "Nofollow" Rel = "Nofollow"/"externo "/follow"; // Adicionar ao UL através do seletor de classe $ (". }}O efeito é o seguinte
Adicione os eventos de clique ao número da página e alterne os dados.
Nenhum evento de clique é necessário na página atual
Adicione um evento OnClick à tag A no número de páginas e vincule uma função Skippage (). A operação na função skippage () é na verdade a operação de enviar solicitação de postagem de Ajax ao servidor quando obtemos os dados da primeira página. Portanto, copie o código de $ (function () {}) na função skippage () e, em seguida, chame a função skippage () quando a página carregar. Passagem 1 significa que os dados da página 1 são carregados por padrão. No momento, $ (function () {}) será executado apenas uma vez. Skippage () se torna uma função recursiva e se chama. No entanto, um único evento de cliques chamará apenas o método de Skippage uma vez, que é diferente da recursão em Java.
Depois de executar esse código, clique em diferentes códigos e descubra que o conteúdo da tabela e a barra de página serão sobrepostos continuamente.
Como mostrado na figura abaixo:
Limpe os dados sempre que os dados são carregados. Limpe a barra da página
Depois de adicionar o código para limpar a barra da página, descobri que a barra de página não foi sobreposta, mas a tabela ainda está sobreposta.
Limpe o formulário
$("#tab").empty(); Depois de executar o código claro da tabela, encontrei o seguinte fenômeno:
A primeira linha da tabela se foi, então você precisa usar um seletor para excluir a primeira linha.
$ ("#tab tr: não (: primeiro)") significa
Primeiro selecione a tabela de acordo com o seletor de identificação
Então, no seletor hierárquico, selecione a linha TR
O seletor básico é primeiro aninhado no seletor básico, o que significa que não é a primeira linha
O significado geral é que, se a tabela não for a primeira linha, o método vazio () é chamado para excluir todos os nós filhos na coleção de elementos correspondentes.
Após o teste, a primeira linha de dados pode ser excluída
Determine se está disponível na página anterior e alterne a função de números da página
Se a página atual for a primeira página, a função de página anterior não estará disponível.
Se a página atual não for a primeira página, adicione um evento de clique em clique, alterne para a página anterior e reduza o número da página em um.
// Mostra a página anterior e determine se o Var Preli está disponível; if (pageno === 1) {// Se a página atual for a primeira página, a função da página anterior não estará disponível preli = $ ('<li> <a href = "javascript: void (0)" rel = "external nofollow" rel = "nofollow" rel = "" nOfollow "=" externo "sollowlow" Rel = "nofollow" " Rel = "externo não -seguinte" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "externo" Rel = "NOFOLL" NOFILL "Rel =" Nofollow "externo" Rel = "Rel a seguir" Rel = "Rel =" NOFOLL " Noffixar "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" externo "Rel =" NOFollow "Rel =" Nofollow "Rel =" Nofollow "" Rel = "Sollow" NOCOLL "=" Rel = "Nofollow" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo"> página anterior </a> </li> ');} else {preli = $ (' <li> <a href = "javascript: void (0)" Rel = "nofollow" Rel = "NOFLY = NOFLY" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" OnClick = "Skippage ('+(pageno-1)+')"> página anterior </a> </l> ');} // use o seletor de classe, add $ (".Determine se está disponível na próxima página e alterne a função de números da página
Se a página atual for a última página, a função da página anterior não estará disponível.
Se a página atual não for a última página, adicione um evento de clique em clique, alterne para a próxima página e adicione um número de página.
// Mostre a próxima página e determine se o VAR Nextli está disponível; if (pageno === TotalPage) {// Se a página atual for a última página, a função da página anterior não estará disponível. nextli = $ ('<li> <a href = "javascript: void (0)" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "externo" Rel = "externo" nOfollow "Rel =" Nofollow "Rel =" Nofollow "" = "externo" NOFILL "Rel =" Rel = "externo não -seguinte" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo" rel = "externo" Rel = "NOFOLL" NOFILL "Rel =" Nofollow "externo" Rel = "Rel a seguir" Rel = "Rel =" NOFOLL " não seguir "rel =" Nofollow externo "rel =" Nofollow externo "rel =" Nofollow externo "rel =" não Page </a> </li> ');} else {// Se a página atual não for a última página, adicione um evento de clique, alterne para a página anterior e reduza o número da página em um. rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo+1)+')">Next page</a></li>');}// Through the class selector, add $(".pagination").append(nextLi);至此,前端页面的代码全部完成,功能全部实现
前端页面的全部代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品展示列表</title> <!--引入bootstrap相关文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> var url ="/ajax_product/product"; var pageNo=1;//当前页面设置为1 var pageSize=5;//每页显示6条商品信息var totalPage;//一共有多少页数据var products;//商品的数据信息//页面加载时,向服务器发送请求,接收全部的商品数据$(function () { skipPage(1); }); function skipPage(page) { //===========分页时的post请求=================================== pageNo=page; //=====向服务器发送post请求$.post( url,//给服务器传送数据的地址{"pageNo": pageNo, "pageSize": pageSize},//给浏览器传递当前页面数和每页显示的条数function (data) { //解析服务器端传过来的全部pagebean数据,格式为json类型var pagebean = eval(data); //同步数据pageNo=pagebean.pageNo; pageSize=pagebean.pageSize; totalPage=pagebean.totalPage; products=pagebean.products; //显示表格中的数据=============================================== //$("#tab").empty(); $("#tab tr:not(:first)").empty(); for (var i = 0; i < products.length; i++) { //遍历每一行的数据var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 并添加到表格中,添加数据到表格中$("#tab").append(protd); } //显示分页条的数据======================================================== //清空分页条$(".pagination").empty(); //先不考虑功能,先能显示出来//显示上一页,判断是否可用var preLi; if(pageNo===1){ //如果当前页是第一页,上一页功能就不可用. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a> </li>'); }else{ //如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo- 1)+')">上一页</a></li>'); } //通过类选择器,添加进去$(".pagination").append(preLi); //遍历显示页码for (var i = 1; i <= totalPage; i++) { var li; if(i===pageNo){ //=========是当前页,就高亮显示li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a> </li>'); //通过类选择器,添加到ul中$(".pagination").append(li); }else{ //========不是当前页,不高亮显示.添加点击事件,参数传递为当前页码li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+i+')">'+i+'</a></li>'); //通过类选择器,添加到ul中$(".pagination").append(li); } } //显示下一页,判断是否可用var nextLi; if(pageNo===totalPage){ //如果当前页是最后一页,上一页功能就不可用. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a> </li>'); }else { //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+ (pageNo+1)+')">下一页</a></li>'); } //通过类选择器,添加进去$(".pagination").append(nextLi); },"json") }</script><body><h3 align="center">促销商品展示</h3><div> <!--商品的表格占一行--> <div> <div> <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化table-bordered表示给表格加边框--> <table id="tab"> <tr> <th>编号</th> <th>商品名称</th> <th>商品数量</th> <th>商品单价</th> </tr> </table> </div> </div> <div> <div > <nav> <ul> <!--此处代码由js动态生成--> </ul> </nav> </div> </div></div></body></html>Resumir
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.