Javaee Three Layer Architecture는 Ajax Pagination Query를 구현합니다
개발 환경 :
1 단계 : 코드 구현 준비
아이디어에서 예비 구성을 개발할 때 인터넷에 많은 게시물이 있으므로 여기에서 반복하지 않을 것입니다. 나는 주로 세 점에 대해 이야기합니다.
서버 구성에서는 빨간색 상자의 두 항목에 대한 업데이트 클래스 및 리소스를 선택해야합니다. 선택 후 핫 배포를 달성 할 수 있습니다.
프로젝트의 이름을 여기에서 작성합니다. 프로젝트의 근본 경로로
JAR 패키지를 가져 오는 방법이 그림에 나와 있습니다. Plus Sign in Feenpence를 클릭하고 생성 한 Lib 폴더를 선택하십시오.
수입 관련 JAR 패키지 : C3P0 JAR 패키지, DBUTILS 도구 클래스 JAR 패키지, FastJSON JAR 패키지, MySQL 드라이버 JAR 패키지
데이터베이스 테스트 03 제품 테이블에 다음 데이터를 작성하십시오.
아이디어에서 프로젝트 하도 계약 및 C3P0 Connection Pool 구성 가져 오기
C3P0 구성 파일은 자체 데이터베이스 이름 및 데이터베이스 비밀번호로 수정해야합니다.
도메인 패키지에서 제품 엔티티 클래스를 작성하고 데이터베이스의 제품 테이블 필드를 기반으로 제품 클래스에 해당 속성을 작성하십시오. Get Set 메소드를 생성하십시오.
연결 풀 객체를 얻기위한 공구 클래스를 만듭니다
2 단계 : 페이징없이 모든 제품 정보를 쿼리하십시오
구현 아이디어 :
jsp/html----->servlet(web layer handles request and response data) ----------------->service(service layer processing logic)------------------->dao(dao layer handles database operations)
제품 페이지를 만들고 서버에 요청을 보내십시오 (모든 제품 정보 가져 오기)
프론트 엔드는 부트 스트랩 반응 형 개발을 사용하여 페이지를 더 아름답게 만들 수 있으며 개발이 더 편리합니다.
페이지 정보에 대한 코드는 다음과 같습니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제품 디스플레이 목록 </title> <!-부트 스트랩 관련 파일을 소개합니다-> <link rel = "stylesheet"href = "/ajax/bootstrap/csss/bootstrap.cs"eterneral nofoll " rel = "외부 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/js </script> type = "text/javaScript"> // 페이지가로드되면 모든 제품 데이터를 수신하기 위해 요청이 서버로 전송됩니다. // ======================================================================================================================= ======================================================================================================================= ======================================================================================================================= =============================================================================================================== // 서버에서 전송 된 모든 데이터 분석 // ============================================================================== var propd = $ ( "<tr> <td>"+제품 [i] .id+"</td> <td>"+제품 [i] .name+"</td> <td>"+제품 [i] .count+"</td>"+제품 [i]. $ ( "#tab"). Append (protd)}, "json")}) </script> <body> align = "center"> 프로모션 제품 디스플레이 </h3> <div> <!-제품 테이블은 마우스 가이 행 테이블로 움직일 때 테이블이라는 것을 의미합니다. id = "tab"> <tr> <th> 번호 </th> <th> 제품 이름 </th> <th> 수량 </th> <th> 제품 수량 </th> <th> 제품 단위 가격 </th> </tr> </div> </div> </div> </body> </html>
요청을 받고 모든 제품 정보를 얻을 수있는 서블릿을 만듭니다.
아이디어에서 다음 그림과 같이 서블릿을 만듭니다.
여기에서 확인하지 않고 주석을 자동으로 생성합니다
확인을 클릭 한 후 Idea는 자동으로 Web.xml 파일로 이동하여 서블릿의 전체 경로 이름을 자동으로 작성하고 URL 패턴을 작성합니다.
URL 패턴은 Ajax 요청의 서블릿과 일치해야합니다.
웹 계층 서블릿의 코드는 다음과 같습니다.
패키지 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.httpervletrequpt; 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 { // garbled 코드 요청을 처리합니다 .SetchAracterEncoding ( "UTF-8"); Response.setContentType ( "Text/Html; charset = utf-8"); // 모든 제품 정보가 표시되기 때문에 수신 할 매개 변수가 없습니다. // 서비스 계층은 모든 데이터를 찾기 위해 메소드를 호출하고 결과를 얻고 클라이언트 제품 서비스 서비스 = New ProductsErvice ()에 응답해야합니다. {// 비즈니스 계층의 메소드를 호출하여 모든 제품 목록을 가져옵니다. // 획득 된 데이터를 JSON 유형 데이터로 변환 문자열 jsonstring = jsonobject.tojsonstring (allProuct); // 브라우저에 다시 쓰기 resonge.getWriter (). 쓰기 (jsonstring); } catch (sqlexception e) {e.printstacktrace (); }} Protected void doget (httpservletrequest 요청, httpservletresponse 응답) servletexception, ioexception {dopost (요청, 응답); }}서비스 계층에서 DAO 계층에서 데이터를 얻고 웹 계층의 서블릿으로 반환하십시오.
웹 계층에서 서비스 계층을 호출하는 코드는 다음과 같습니다.
패키지 com.thc.service; import com.thc.dao.productdao; import com.thc.domain.product; import java.sql.sqlexception; import java.util.list; public class productservice {// Service Layer에서 데이터를 획득하고 <Products -leculation incrows (findallprouct) (findallprouct)에 대한 데이터를 얻습니다. ProductDao dao = 신제품 dao (); // 모든 제품 목록 <Product> AllProduct = dao.findallProduct (); AllProduct를 반환하십시오. }}DAO 계층의 서버에서 쿼리 데이터를 제공하고 서비스 계층을 제공합니다.
패키지 com.thc.dao; import com.thc.domain.product; import com.thc.utils.jdbcutils; import org.apache.commons.commons.dbutils.queryrunner; import org.apache.commons.dbutils.handlers.beanlisthandler; import java.sql.sqlemlectement; java.util.List;//====================================== The dao layer is specifically responsible for database operations public class ProductDao { //============= Query all product information public List<Product> findAllProduct() throws SQLException { //Use dbutils QueryRunner Core 객체 QueryRunner QR = New QueryRunner (jdbcutils.getDatasource ()); // 모든 제품 문자열 sql = "select * from product"; // 제품을 목록 컬렉션으로 전환하고 제품 목록 <Product> 제품으로 전환합니다. 반품 제품; }}DAO 계층이 데이터를 가져 오면 서비스 계층으로 전달됩니다. 그런 다음 서비스 계층이 웹 계층의 서블릿으로 전달합니다. 서블릿이 데이터를 가져 오면 목록 컬렉션에 저장된 다음 목록 수집을 JSON 데이터 유형으로 변환하여 브라우저에 씁니다. 프론트 엔드 페이지의 다음 코드는 서블릿이 반환 한 JSON 데이터를 구문 분석하는 것입니다.
$ .post (url, function (data) {// 전송 된 모든 데이터를 분석합니다 서버 // ======================================================== ====================================================================== =================================================================== ====================================================================== =================================================================== ====================================================================== =================================================================== ====================================================================== 테이블에 추가하여 표에 데이터를 추가하십시오 ( "#tab").Google Chrome에서 제공하는 패키지 Grabber 도구를 통해 Servlet Response의 데이터를 볼 수 있습니다.
다음 데이터는 모든 응답 데이터를 복사하십시오. 배열에는 제품 객체에 중첩되어 있습니다.
객체는 모두 키 값 쌍의 형태로 존재합니다.
예를 들어, 첫 번째 데이터에서 키는 카운트이고 값은 100입니다. 키는 ID이고, 값은 1이고, 키는 이름이고, 값은 TV이고, 키는 가격, 값은 2000입니다.
[{ "count": 100, "id": 1, "name": "tv", "price": "count": 200, "id": 2, "name": "세탁기", "가격": 1000}, {300, "id": 3, "이름": "에어컨", "3000}, { "count": 50, "id": 4, "name": "projector", "price": 2000}, { "count": 1000, "id": 5, "name": "hp computer", "price": 4000}, { "count": "id": 6, "이름": "price": 5000}, { "count": 60, "id": 7, "name": "sewing machine", "price": 2000}, { "count": 100, "id": 8, "name": "xiaomi box", "price": 2200}, { "count": 300, "id": 9, ""price ": 2000}, { "count": 200, "id": 10, "name": "Water Purifier", "Price": 2000}, { "count": 500, "id": 11, "name": "전기 히터", "가격": 2000}, { "count": 100, "id": "name": "juicker", "399}, { "count": 200, "id": 13, "name": "전기 압력 밥솥", "가격": 498}, { "count": 300, "id": 14, "이름": "쌀 쿠커", "가격": 299}, { "count": 50, "id": 15, "name": "microwave oven", "price", "1299}, { "count": 200, "id": 16, "name": "콩 우유 메이커", "가격": 199}, { "count": 300, "id": 17, "이름": "유도 쿠커", "가격": 398}, { "count": 500, "id": 18, ""humidifier ","99}, " { "count": 250, "id": 19, "name": "Razor", "Price": 98}, { "count": 1000, "id": 20, "safety", "price": "price": 16.5}, { "count": 1200, "id": 21, "diapai", "price", "8.8}, { "count": 1500, "id": 22, "name": "libai", "price": 9.9}]페이지 매김이 없으면 디스플레이 효과는 다음과 같습니다.
모든 데이터는 페이지에 표시됩니다. 예를 들어 Baidu에서 키워드를 검색하는 데 많은 데이터가있는 경우 수만 또는 수억 명이있을 수 있습니다. 데이터베이스에서 많은 결과를 얻고 브라우저에 많은 결과를 얻는 데 시간이 오래 걸립니다. 사용자 경험은 매우 열악하므로 페이징 기술이 필요합니다. 물리적 페이징이 사용됩니다.
한 번에 데이터베이스에서 현재 페이지에 필요한 정보 만 쿼리합니다.
3 단계 : 현재 페이지 수와 서버에 표시된 페이지 수를 전달합니다.
HTML 페이지는 현재 페이지 수와 페이지 당 표시된 페이지 수를 늘리고 서버로 전달해야합니다.
다음 그림과 같이 코드를 변경하십시오.
서블릿 계층에서 매개 변수를 수신해야하고 현재 페이지의 해당 데이터는 서비스 계층에서 쿼리됩니다. 코드는 다음과 같습니다.
공개 클래스 제품은 httpservlet {protected void dopost (httpservletrequest 요청, httpservletrepsonse 응답)를 inservletexception, ioexception {// garbled 코드 request.setcharacterencoding ( "utf-8"); Response.setContentType ( "Text/Html; charset = utf-8"); // 현재 페이지 int pageno = integer.parseint (request.getParameter ( "pageno")); // 페이지 당 표시된 항목 수 int pagesize = integer.parseint (request.getParameter ( "pagesize")); // 모든 제품 정보가 표시되기 때문에 수신 할 매개 변수가 없습니다. // 서비스 계층은 모든 데이터를 찾기 위해 메소드를 호출하고 결과를 얻고 클라이언트 제품 서비스 서비스 = New ProductsErvice ()에 응답해야합니다. {// 표시된 페이지 수와 각 페이지에 따라 서비스 계층 목록에서 데이터를 얻으십시오 <com.thc.domain.product> product = service.findProduct (pageno, pagesize); 문자열 jsonstring = jsonobject.tojsonstring (제품); // 브라우저에 다시 쓰기 resonge.getWriter (). 쓰기 (jsonstring); } catch (sqlexception e) {e.printstacktrace (); }} Protected void doget (httpservletrequest 요청, httpservletresponse 응답) servletexception, ioexception {dopost (요청, 응답); }}서비스 계층에 추가 된 현재 페이지 데이터를 찾는 새로운 방법
공개 목록 <Product> findProduct (int pageno, int pagesize) sqlexception {productDao dao = new productDao (); List <Product> Product = Dao.FindProduct (Pageno, Pagesize); 반품 제품; }DAO 계층에 추가 된 데이터베이스에서 현재 페이지를 찾는 새로운 방법
공개 목록 <Product> findProduct (int pageno, int pagesize) sqlexception {QueryRunner qr = new QueryRunner (jdbcutils.getDatasource ()); 문자열 sql = "선택 *에서 제품 제한에서?,?"; // 첫 번째 매개 변수 제한 : 데이터베이스에서 시작하여 인덱스가 0에서 시작되는 곳에서 시작하십시오. // 두 번째 매개 변수에서 시작하십시오. 두 번째 매개 변수 : 매번 몇 개의 검사 수는 다음과 같습니다. // 첫 번째 매개 변수의 규칙은 다음과 같습니다. 현재 페이지 수를 하나씩 빼고, 페이지 목록 당 쿼리 수를 곱한 값 <ProductList = QR.Query (SQL, New BeanlisThandler <>) (PARGENO), (PAGENO -1)); ProductList 리턴; }아래 그림과 같이 브라우저 쪽이 표시됩니다. Pagesize가있는 제품 정보 만 한 번에 표시됩니다.
그러나 페이지 버튼을 클릭하여 페이지를 동적으로 전환 할 수 없습니다.
그런 다음 페이지가 페이징 바를 표시하는 방법과 데이터를 어떻게 캡슐화해야합니까?
페이지 페이징 바에 표시되는 페이지 수가 동적으로 변경되었음을 알고 있습니다 . 총 페이지 수 = 각 페이지에 표시되는 총 데이터/데이터 수는 상향 반올림해야합니다. 즉, 목록 <Product> 데이터 외에도 당사 페이지에는 총 데이터 수, 총 페이지 수, 현재 페이지 및 페이지 당 디스플레이 수가 필요합니다. 또한 현재 페이지의 Pageno도 동적으로 변경됩니다. 페이지에서 몇 페이지를 클릭합니까? Pageno는 Pageno의 수입니다. 따라서이 데이터를 캡슐화하려면 다른 javabean (pagebean.java)을 만들어 JSON 데이터로 변환하여 클라이언트로 보내어 표시해야합니다.
4 단계 : 페이지의 관련 데이터를 Javabean으로 캡슐화합니다.
다음 속성으로 도메인 패키지에서 PageBean이라는 클래스를 만듭니다.
Private Int Pageno; // 현재 페이지 번호 Private int Pagesize; // 각 페이지에 표시된 수의 수
서비스 계층과 각 페이지에 표시된 페이지 수 (Pagesize)에 현재 페이지 수 (Pageno)를 전달하고 웹 레이어로 PageBean을 반환하십시오.
웹 계층의 최종 코드는 다음과 같습니다.
공개 클래스 제품은 httpservlet {protected void dopost (httpservletrequest 요청, httpservletrepsonse 응답)를 inservletexception, ioexception {// garbled 코드 request.setcharacterencoding ( "utf-8"); Response.setContentType ( "Text/Html; charset = utf-8"); // 현재 페이지 int pageno = integer.parseint (request.getParameter ( "pageno")); // 페이지 당 표시된 항목 수 int pagesize = integer.parseint (request.getParameter ( "pagesize")); // 모든 제품 정보가 표시되기 때문에 수신 할 매개 변수가 없습니다. // 서비스 계층은 모든 데이터를 찾기 위해 메소드를 호출하고 결과를 얻고 클라이언트 제품 서비스 서비스 = New ProductsErvice ()에 응답해야합니다. 시도 { /* 비즈니스 계층 방법을 호출하여 모든 제품 목록 <com.thc.domain.product> allprouct = service.findallprouct (); 얻은 데이터를 JSON 유형 데이터 문자열로 변환 jsonstring = jsonobject.tojsonstring (allProuct);*/// 서비스 계층의 현재 페이지와 각 페이지에 표시된 숫자 <com.thc.domain.product> product = service.findProduct (pageno, pageize); // ======================================================================================= // ============================================================================= ============================================================================ ============================================================================ ============================================================================ jsonstring = jsonobject.tojsonstring (pagebean); // ================================================================================ } catch (sqlexception e) {e.printstacktrace (); }} Protected void doget (httpservletrequest 요청, httpservletresponse 응답) servletexception, ioexception {dopost (요청, 응답); }}서비스에서는 PageBean의 모든 정보를 얻어야하며 Pageno 및 Pagesize가 알려져 있습니다. DAO 계층에서 제품 정보 데이터 및 목록 컬렉션을 얻어야하며 총 제품 정보 데이터 TotalCount도 얻어야합니다. 각 페이지에 표시된 데이터로 총 데이터로 몇 페이지를 나눌 수있는 페이지 수는 각 페이지에 표시되고 위쪽으로 반올림됩니다.
서비스 계층의 최종 코드는 다음과 같습니다.
public class ProductService { //In the service layer, obtain data from the dao layer and return the data to the web layer//===================================== public List<Product> findAllProuct() throws SQLException { ProductDao dao = new ProductDao(); // 모든 제품 목록 <Product> AllProduct = dao.findallProduct (); AllProduct를 반환하십시오. } // ================================================================================================================================================================================================================= publictructt (int pageno, int page) sqlemplement {producte {pageproduct (int pageno, int page). ProductDao (); List <Product> Product = Dao.FindProduct (Pageno, Pagesize); 반품 제품; } // ===================================================================================================== ProductDao (); List <Product> Product = Dao.FindProduct (Pageno, Pagesize); int totalcount = dao.findtotalCount (); pagebean pb = 새로운 pagebean (); // 데이터 캡슐화 pb.setTotalCount (TotalCount); pb.setpageno (pageno); pb.setpagesize (pagesize); PB. 세트 제품 (제품); // 위쪽에서 총 페이지 수를 계산합니다. 1.0을 곱하는 것을 잊지 마십시오. 그렇지 않으면 데이터의 한 페이지가 int totalpage = (int) math.ceil (TotalCount*1.0/pagesize)이 누락됩니다. pb.settotalpage (TotalPage); // 데이터를 서블릿에 제공합니다. PB; }}DAO 계층에서는 총 데이터베이스 정보 수를 쿼리하기 위해 새로운 메소드가 추가됩니다.
DAO 레이어의 최종 코드는 다음과 같습니다.
// =============================== DAO 계층은 데이터베이스 운영에 대해 구체적으로 책임이 있습니다. 공개 클래스 ProductDao {// ========= Query 모든 제품 정보 공개 <ProductsProduct () sqlexcection {// 사용 Query Quercection {// New QueryRunner (jdbcutils.getDatasource ()); // 모든 제품 문자열 sql = "선택 *에서 곱하기"; // 제품을 목록 컬렉션으로 변환하면 제품에 대한 일반적인 제품은 제품 목록 <Product> Products = QR.Query (SQL, New Beanlisthandler <> (Product.Class)); 반품 제품; } // ================================================================================================================================================================================================================== findProduct (int pageno, int pageize) sqlexception {queryRunner qr = new queryRunner (jdbcutils) 문자열 sql = "선택 *에서 제품 제한에서?,?"; // 첫 번째 매개 변수를 제한하십시오. 데이터베이스에서 시작하는 곳에서 인덱스는 0에서 시작합니다. // 두 번째 매개 변수에서 시작합니다. 두 번째 매개 변수 : 첫 번째 매개 변수의 규칙은 다음과 같습니다. 현재 페이지 수를 하나씩 빼고 페이지 목록 당 쿼리 수를 곱한 값 <ProductList (SQL, SQL, New BeanlisThandler <> Pagesize) ProductList 리턴; } // ============== 쿼리에 몇 개의 데이터가 있습니까? ============================= public int findTotalCount() throws SQLException { QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); 문자열 sql = "제품에서 count (*)를 선택하십시오"; long countl = (long) qr.query (sql, new scalarhandler ()); return countl.intValue (); }}5 단계 : 프론트 엔드 페이지를 처리합니다
테이블 태그 아래에서 페이징 구성 요소를 제공하기 위해 라인을 추가하십시오. LI 코드는 동적으로 표시해야하므로 LI 코드를 주석하십시오.
먼저 매개 변수 변수를 선언합니다
var url = "/ajax_product/product"; var pageno = 1; // 현재 페이지는 1var pagesize = 6으로 설정되어 있습니다. 각 페이지에 6 개의 제품 정보가 표시됩니다. var totalpage; // 총 Var 제품에 얼마나 많은 데이터가 있는지; // 제품 데이터 정보
AJAX에 대한 게시물 요청을 작성한 후 패킷 캡처는 브라우저가 데이터를 수신하는지 테스트합니다.
$ .post (url, // 서버로 전송 된 데이터 주소 { "pageno": pageno, "pagesize": pagesize}, // 페이지 횟수와 페이지 함수 당 표시되는 조각 수 (data) {})패킷을 잡은 후 다음 데이터를 얻었습니다
{ "pageno": 1, "pagesize": 6, "products": [{ "count": 100, "id": "name": "tv", "tv", "tv", "price", "price": "count": "id": "2,"name ":"세탁기 ","가격 ": 1000}, {300,"Id ": 3," "" "," 컨디셔너 ","가격 ": 3000}, {"count ":"50, "id": 4, "name": "projector", "price": 2000}, { "count": 1000, "id": 5, "name": "hp computer", "price": 4000}, "count": 100, "id": 6, ""Apple " "TotalCount": 22, "TotalPage": 3}이는 서버 측이 브라우저에 정상적으로 응답 할 수 있음을 의미합니다. 그런 다음 프론트 엔드 코드를 작성하십시오
테이블에 데이터를 표시합니다
먼저 백엔드에서 얻은 데이터를 구문 분석 한 다음 JS 코드에 동기화하고 PageBean.Products를 통해 모든 제품 객체의 데이터 배열을 얻은 다음이 배열을 통해 반복하고 제품 속성의 값을 테이블에 스플릿합니다.
코드는 다음과 같습니다
$ .post (URL, // 서버로 전송되는 데이터 주소 { "pageno": pageno, "pagesize": pagesize}, // 페이지 당 표시되는 부분 수와 페이지 당 표시되는 조각 수는 브라우저 기능 (데이터) {// 모든 페이지 비인 데이터가 서버에서 전송됩니다. pageno = pageize = pagebean.totalpage; ============================================================================================================================================= ============================================================================================================================================= ============================================================================================================================================= ============================================================================================================================================= for (var i = 0; i <products.length; i ++) {// 데이터 전송 var protd = $ ( "<tr> <td>"+제품 [i] .id+"</td> <td>"+제품 [i] .name+"<td> <td>"+제품 [i] .count+"</td> <td>"+제품 [i]. </tr> "); // 테이블에 추가하고, 표에 데이터를 추가하십시오 $ ("#tab "). Append (protd);}},"json ")이 코드를 작성한 후 서버를 켜서 데이터를 테이블에 얻을 수 있는지 테스트 할 수 있습니다. 테스트 후 데이터가 성공적으로 표시됩니다.
페이지 표시 줄의 데이터를 표시하십시오
먼저 이전 페이지와 다음 페이지의 데이터를 표시합니다.
// 페이지 표시 줄의 데이터 표시 // 함수를 고려하지 않으면 먼저 표시 될 수 있습니다. 먼저 표시 될 수 있습니다. // 먼저 표시 할 수 있습니다. // 이전 페이지 표시 var preli = $ ( '<li> <a href = "#"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow" "preveral nofollow"> prevolow ". 페이지 </a> </li> '); // add $ ( ". Pager"). Append (preli); // 다음 페이지 표시 var var nextli = $ ('<li> <a href = "#"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = rel = rel = "external nofollow". 페이지 </a> </li> '); // 추가 $ ( ". Pager"). Append (NextLi);테스트 결과는 다음과 같습니다.
표시 페이지 번호 데이터 :
// 페이지 표시 줄의 데이터 표시 // 함수를 고려하지 않음, 먼저 표시 될 수 있습니다. 먼저 표시 될 수 있습니다. // 이전 페이지 표시 var preli = $ ( '<li> <a href = "#"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "rel ="external nofollow. 페이지 </a> </li> '); // $ ( ". Pager"). Append (preli); // 페이지 번호를 통해 (var i = 1; i <= TotalPage; i ++) {// li 태그 생성 var li = $ ('<li> <a href = "rel ="replollow "rel = external nof anclolary nofollow "rel ="외부 nofollow "rel ="외부 nofollow "> '+i+'</a> </li> '); // 클래스 선택기 $ ( ". Pager"). Append (li);} // 다음 페이지 표시 var var nextli = $ ( '<li> <a href = "rel ="external nofollow "rel ="external nofollow "rel ="external nofollow "rel ="external nofollow "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="rel = "rel ="replollow "rel = rel = "external nofollow"> 다음 페이지 </a> </li> '); // $ ( ". Pager"). Append (nextli);효과는 아래 그림에 나와 있습니다.
현재 페이지가 강조 표시됩니다
Pager 클래스는 부트 스트랩에서 강조 표시를 지원하지 않기 때문에 Pagination 클래스는 Pagination으로 대체됩니다.
강조 표시의 논리는 트래 버릴 때 그것이 현재 페이지 (pageno)인지 결정하는 것입니다.
Li 태그에 클래스의 활성 속성을 추가하십시오
// (var i = 1; i <= TotalPage; i ++)의 페이지 번호를 전송합니다. {var li; if (i === pageno) {// ============= 이것은 현재 페이지입니다. 그것은 현재 페이지입니다. 그것은 li = $ ( '<li> <a href = "rel ="external nofollow "rel ="external nofollow "rel ="external nofollow "rel ="external nofollow ""external nofollo " > '+i+'</a> </li> '); // 클래스 선택기 $ ( ". Pagination"). Append (li); } else {// ============ 현재 페이지가 아닙니다. 하이라이트 li = $ ( '<li> <a href = "#"rel = "external nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "외부 nofollow"rel = "external nofollow"; // 클래스 선택기 $ ( ". Pagination"). Append (li); }}효과는 다음과 같습니다
페이지 번호와 스위치 데이터에 클릭 이벤트를 추가하십시오.
현재 페이지에는 클릭 이벤트가 필요하지 않습니다
페이지 수의 A 태그에 onclick 이벤트를 추가하고 Skippage () 함수를 바인딩하십시오. Skippage () 함수의 작업은 실제로 첫 페이지 데이터를 얻을 때 Ajax 게시물 요청을 서버로 전송하는 작업입니다. 따라서 $ (function () {})의 코드를 skippage () 함수에 복사 한 다음 페이지가로드 될 때 skippage () 함수를 호출하십시오. 1을 전달한다는 것은 페이지 1 데이터가 기본적으로로드되었음을 의미합니다. 현재 $ (function () {})은 한 번만 실행됩니다. Skippage ()는 재귀 기능이되어 스스로를 호출합니다. 그러나 단일 클릭 이벤트는 Skippage Method를 한 번만 호출합니다. 이는 Java의 재귀와 다릅니다.
이 코드를 실행 한 후 다른 코드를 클릭하고 테이블의 내용과 페이지 표시 줄이 지속적으로 중첩 될 것임을 찾으십시오.
아래 그림과 같이 :
데이터가로드 될 때마다 데이터를 지 웁니다. 페이지 막대를 지우십시오
페이지 막대를 지우기 위해 코드를 추가 한 후 페이지 막대가 중첩되지 않았지만 테이블이 여전히 겹쳐 졌다는 것을 알았습니다.
양식을 지우십시오
$("#tab").empty(); 테이블의 명확한 코드를 실행 한 후 다음 현상을 발견했습니다.
테이블의 첫 번째 줄은 사라 졌으므로 첫 번째 줄을 제외하기 위해 선택기를 사용해야합니다.
$ ( "#tab tr : not (: first)")는 의미합니다
먼저 ID 선택기에 따라 테이블을 선택하십시오
그런 다음 계층 적 선택기에서 TR 행을 선택하십시오
기본 선택기는 먼저 기본 선택기에 중첩되어 있지 않으므로 첫 번째 줄이 아닙니다.
전반적인 의미는 테이블이 첫 번째 행이 아닌 경우 일치하는 요소 컬렉션에서 모든 자식 노드를 삭제하기 위해 빈 () 메소드가 호출된다는 것입니다.
테스트 후 첫 번째 데이터 라인을 삭제할 수 있습니다.
이전 페이지에서 사용할 수 있는지 여부를 결정하고 페이지 번호 기능을 전환하십시오.
현재 페이지가 첫 페이지 인 경우 이전 페이지 기능을 사용할 수 없습니다.
현재 페이지가 첫 페이지가 아닌 경우 클릭 이벤트를 추가하고 이전 페이지로 전환 한 다음 페이지 번호를 하나씩 줄입니다.
// 이전 페이지를 표시하고 var preli를 사용할 수 있는지 여부를 결정하십시오. if (pageno === 1) {// 현재 페이지가 첫 페이지 인 경우 이전 페이지의 기능을 사용할 수 없습니다. preli = $ ( '<li> <a href = "javaScript : void (0)"rel = "external nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"repteral nof "replolar" rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = rel = "external nofollow"rel = "external nofollow" "external nefollow". rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = rel = "external nofollow"rel = "external nofollow" "external nefollow". rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"> 이전 페이지 </a> </li> "; href = "javaScript : void (0)"rel = "external nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel =. onclick = "Skippage ( '+(pageno-1)+')"> 이전 페이지 </a> </li> ');} // 클래스 선택기를 사용하고 $ ( ". Pagination")를 추가하십시오. Append (preli);다음 페이지에서 사용할 수 있는지 여부를 결정하고 페이지 번호 기능을 전환하십시오.
현재 페이지가 마지막 페이지 인 경우 이전 페이지 기능을 사용할 수 없습니다.
현재 페이지가 마지막 페이지가 아닌 경우 클릭 이벤트를 추가하고 다음 페이지로 전환 한 다음 페이지 번호를 추가하십시오.
// 다음 페이지를 표시하고 var nextli를 사용할 수 있는지 확인하십시오. if (pageno === TotalPage) {// 현재 페이지가 마지막 페이지 인 경우 이전 페이지의 기능을 사용할 수 없습니다. nextLi = $ ( '<li> <a href = "javaScript : void (0)"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"external nof "replollow". rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = rel = "external nofollow"rel = "external nofollow" "external nefollow". rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"rel = rel = "external nofollow"rel = "external nofollow" "external nefollow". rel = "외부 nofollow"rel = "external nofollow"rel = "external nofollow"rel = "external no> next page </a> </li> ');} else {// 현재 페이지가 마지막 페이지가 아닌 경우, 클릭 이벤트를 추가하고, 이전 페이지로 전환하고, nextli = $ ('<li> <a href =". 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)+')">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>요약
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.