프로젝트에서 이전 모듈에서 사용한 Pagination 플러그인은 Datatables이기 때문에 매우 편리하지만 새로 만든 모듈 테이블의 레이아웃이 변경되었으며 Datatables 플러그인이 충족 할 수 없습니다. 스타일을 통합하고 페이지의 쿼리 매개 변수를 전달하고 반향하지 않기 위해 페이지를 부분적으로 새로 고치는 구현 솔루션이 채택됩니다.
구현 계획은 다음과 같습니다. 테이블 부분을 추출하여 페이지 부분 새로 고침의 일부로 사용하십시오. 파일 이름은 List-Data.vm입니다
<TABLE> <THEAD> <TR> <th> username </th> <th> age </th> </tr> </thead> <tbody> #foreach ($! {page.list}) <tr> <td> $! {data.username} </td> <td> $! #Pagenation ($! {page})Pagenation은 정의에 의해 정의 된 매크로이며, 하단 페이지 막대와 페이지 막대를 표시하는 데 사용됩니다. 페이지 객체는 AJAX 요청에 의해 반환 된 페이지 데이터입니다. 각 AJAX 요청, PAGED 데이터를 쿼리하고 List-Data.vm에 해당하는보기의 ModelAndView 객체에 데이터를 넣은 다음 ModelAndView 객체를 반환 하고이 부분을 메인 페이지 테이블의 부분에 추가하십시오.
매크로 부분은 다음과 같습니다.
#Macro (pagenation $ data) #if (! $ data.list.list.size () 또는 $ data.list.size () == 0) <div style = "height : 40px; line-height : 40px; 텍스트-정체; font-size : 14px;"> 레코드를 찾지 못했습니다 </div> #end #if ($ data.list.size). id = "activityTable_info"robol = "status"aria-live = "pricite"> show $! {data.startrow} to $! {data.endrow} 항목 결과, 총 $! {data.total} 항목 </div id = "prevpage"> #set ($ prevpage = $ {data.prepage}) # $ {data.nextpage}) <a #if ($ data.pagenum == 1) disabled = "disabled"href = "javaScript : void (0)"rel = "external nofollow"rel = "external nofollow"#else pagenum = "1"href = "javascript : gopage (1)"rel = external nof " #elefollow"rel = rel = rel =. 2px; " > home </a> <a #if ($ data.pagenum == 1) disabled = "disabled"href = "javaScript : void (0)"rel = "외부 nofollow"rel = "external nofollow"#ELSE pagenum = "$ prevpage"href = "javaScript : gopage ($ prevpage)"rel = "exteral nofolly" #el 2px; " > 이전 페이지 </a> #set ($ temp = $ {data.pagenum} -1) #set ($ numbers = $! {pageUtil.numbers ($ temp, $ data.pages)}) #fifeach ($ foo in $ 숫자) #if ($ foo == -999) </span> #ELSE <A PAGENUM = "$ foo" "$ foo" "$ foo" #if ($ foo! = $ {data.pagenum}) href = "javaScript : gopage ($ foo)"rel = "external nofollow"#end style = "margin-left : 2px;" > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) disabled = "disabled"#else pagenum = "$ nextnpage"href = "javaScript : gopage ($ nextnpage)"rel = "외부 nofollow"#end style = "margin-left : 2px;" > 다음 페이지 <a #if ($ data.pagenum == $ $ data.pages) disabled = "disabled"href = "javaScript : void (0)"rel = "external nofollow"rel = "external nofollow"#ELSE pagenum = "$ data.pages"href = "javascript : gopage ($ data.pages) #ELSE pagenum = "$ data.pages"href = "javaScript : gopage ($ data.pages)"rel = "external nofollow"#end> 마지막 페이지 </a> <input id = "changepage"type = "텍스트"maxpage = "10"style = "height : 28px; line-height : 28px; width : 40px; href = "JavaScript : JumpPage ($ data.pages);" rel = "외부 nofollow"style = "margin-bottom : 5px"> 확인 </a> #end </div> <div p_sortinfo = "$! {data.orderby}"p_isfirst = $! {data.isfirst} p_islast = $! {data.islast} p_currentpagenum = "$! {pagedum}" p_totalSize = "$! {data.total}"p_endrow = "$! {data.endrow}"p_totalPagesNum = "$! {data.pages}"p_pagesize = "$! {data.pagesize}"p_startrow = "$!PageUtil은 Velocity Toolbox로 작성된 도구 클래스로, Pagination Page Paging Bars의 Pagination Page 번호 표시를 모방하는 데 사용됩니다.
공개 클래스 PageUtil {public static linkedlist <integer> 범위 (Integer Len, Integer Start) {LinkedList <integer> out = new LinkedList <> (); 정수 끝; if (start == null) {start = 0; 끝 = 렌; } else {end = start; 시작 = 렌; } for (int i = start; i <end; i ++) {out.add (i); } 리턴 아웃; } public static list <integer> 숫자 (정수 페이지, 정수 페이지) {linkedList <integer> numbers = new LinkedList <> (); 정수 버튼 = 7; 정수 반 = 버튼 / 2; if (pages <= 버튼) {숫자 = 범위 (0, pages); } else if (page <= half) {숫자 = 범위 (0, buttons-2); 숫자 .add (-1000); 숫자 .add (페이지 -1); } else if (page> = pages -1- Half) {numbers = range (pages- (buttons -2), pages); 숫자 .addfirst (-1000); // 숫자를 put.addfirst (0); } else {숫자 = 범위 (페이지 -1, page+2); 숫자 .add (-1000); 숫자 .add (페이지 -1); 숫자 .addfirst (-1000); 숫자 .addfirst (0); } list <integer> res = new ArrayList <> (); for (정수 정수 : 숫자) {res.add (Integer+1); } return res; }}이 논리는 Datatables의 JS 소스 코드에서 찾을 수 있으며 Java 코드로 변환했습니다. Datatables의 코드 의이 부분은 다음과 같습니다.
함수 _numbers (페이지, 페이지) {var numbers = [], buttons = extpagination.numbers_length, half = math.floor (buttons / 2), i = 1; if (pages <= buttons) {numbers = _range (0, pages); } else if (page <= half) {numbers = _range (0, buttons-2); 숫자 .push ( 'Ellipsis'); 숫자 .push (페이지 -1); } else if (page> = pages -1- Half) {숫자 = _range (pages- (buttons -2), pages); 숫자 .splice (0, 0, 'Ellipsis'); // IE6 숫자로 변속되지 않음 .splice (0, 0, 0); } else {numbers = _range (페이지 -1, page+2); 숫자 .push ( 'Ellipsis'); 숫자 .push (페이지 -1); 숫자 .splice (0, 0, 'Ellipsis'); 숫자 .splice (0, 0, 0); } 번호 .dt_el = 'span'; 반환 번호; } var _range = function (len, start) {var out = []; var 끝; if (start === undefined) {start = 0; 끝 = 렌; } else {end = start; 시작 = 렌; } for (var i = start; i <end; i ++) {out.push (i); } 리턴 아웃; };페이지의 AJAX 요청 페이지 매김 데이터를 캡슐화했습니다.
/ ** *////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // 매크로 페이지 매김 페이지는 메소드를 호출하려면 매크로 페이지 매김 페이지 점프 메소드를 호출하기 위해 점프 점프 (MACRO PAGINATION) 메소드를 호출하려면 점프. if (redirectPage == "") {$ ( "#ChangePage"). focus (); } else {var rex =/^/d+$/; if (! rex.test (redirectPage)) {alert ( "페이지 번호가 잘못 입력되면 총 페이지 수보다 크지 않은 양의 정수 만 입력 할 수 있습니다"); } else {var pageno = parseint (RedirectPage); if (pageno <= 0 || pageno> totalpage) {alert ( "페이지 번호는 잘못 입력되며 총 페이지 수보다 큰 양수 정수 만 입력합니다"); }else{ goPage(redirectpage) } } } } } $.fn.pagenation = function(options) { //Default parameters var defaults={ url:"", data:{},//Parameter pageNo:1,//Page number pageSize:10,//Page size pageSuccess:{}//Callback function returned by pagination data} var _self = $ (this); 옵션 = $ .extend (기본값, 옵션); var ajaxdata = { "pageno": 옵션 .pageno, "pagesize": 옵션 .pagesize}; this.fndraw = function (pageno) {if (typeof (Options.Data) == 'function') {ajaxdata = 옵션.data (ajaxdata); } else {ajaxdata = $ .extend (ajaxdata, 옵션 .data); } if (pageno! = undefined) {ajaxdata [ 'pageno'] = pageno; } $ .ajax ({url : 옵션.url, async : false, type : "post :"post ", data : ajaxdata, success : function (result, code, dd) {_self.html (result); if (typeof 옵션 .pagesuccess == 'function') {옵션. }); }; this.init = function () {this.fndraw (1); 이것을 반환하십시오; } 이것을 반환하십시오. }메인 페이지에서 호출하십시오.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 제목 삽입 제목 </title> #set ($ ctx = $ {request.getContextPath ()}) <링크 rel = "StylSheet"type = "text/css" href = "$ ctx/assets/js/datatables/jquery.datatables.min.css"rel = "external nofollow"/> <link rel = "stylesheet"type = "text/css"href = "$ ctx/asts/js/dataTables/css/jquery.datatables_them.cs"repore " <script type = "text/javaScript"src = "$ ctx/assets/js/jquery-1.11.2.min.js"> </script> <script type = "text/javaScript"src = "$ ctx/assets/js/macro.pagination.js"> type = "text/javaScript"> var pagenation = $ ( "#pagediv"). pagenation ({url : "$ {ctx} /listdata.do", pagesize : 20, data : function (data) {$ ( "#searchform [name]"). 각 (i, n) {n)); n.valtr ( 'n.tatlt (')); }, pagesUccess : function () {}}). init (); 함수 gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>PagesUccess 매개 변수는 AJAX가 데이터를 성공적으로 반환 한 후 수행 해야하는 일부 작업에 사용됩니다.
내가 여기서 말한 것은 명확하지 않습니다. 코드 클라우드에 첨부 된 git 주소는 다음과 같습니다. http://git.oschina.net/ivwpw/pagenation
데이터베이스에서 데이터를 삽입하는 부분은 없지만 컨트롤러의 페이지에서 요구하는 데이터 만 시뮬레이션합니다.
위의 기사 SpringMVC+Velocity의 DataTables를 모방하기위한 부분 새로 고침 페이지 매김 방법은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.