Because the pagination plugin used by the previous module in the project was Datatables, it is very convenient, but the layout in the newly made module table has changed, and the Datatables plugin cannot meet it. In order to unify the style, and do not want to pass and echo the query parameters on the page, the implementation solution of partial refreshing the page is adopted.
The implementation plan is like this: extract the table part and use it as the part of the page partial refresh. The file name is list-data.vm
<table> <thead> <tr> <th>userName</th> <th>age</th> </tr> </thead> <tbody> #foreach($data in $!{page.list}) <tr> <td>$!{data.userName}</td> <td>$!{data.sex}</td> </tr> #end </tbody> </table> #pageNation($!{page})The pageNation is a macro defined by the definition, which is used to display the bottom page bar and page bar. The page object is the page data returned by the ajax request. Each ajax request, query the paged data, put the data into the ModelAndView object of the view corresponding to list-data.vm, and then return the ModelAndView object, append this part to the part where the main page table is.
The macro part is as follows:
#macro(pageNation $data) #if(!$data.list.size() or $data.list.size() == 0) <div style="height:40px; line-height:40px; text-align:center; font-size:14px;"> Record not found</div> #end #if($data.list.size() and $data.list.size() > 0) <div id="activityTable_info" role="status" aria-live="polite">Show $!{data.startRow} to $!{data.endRow} Item results, total $!{data.total} items</div> <div id="pagination"> #set($prevPage = ${data.prePage}) #set($nextnPage = ${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 nofollow" #end style="margin-left: 2px;" >Home</a> <a #if($data.pageNum ==1) disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" #else pageNum="$prevPage" href="javascript:goPage($prevPage)" rel="external nofollow" #end style="margin-left: 2px;" > Previous page</a> #set($temp = ${data.pageNum} - 1) #set($numbers = $!{pageUtil.numbers($temp, $data.pages)}) #foreach($foo in $numbers) #if($foo == -999) <span>…</span> #else <a pageNum="$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="external nofollow" #end style="margin-left: 2px;" > Next page<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)" rel="external nofollow" rel="external nofollow" #else pageNum="$data.pages" href="javascript:goPage($data.pages)" rel="external nofollow" #end >Last Page</a> Go to the <input id="changePage" type="text" maxpage="10" style="height:28px;line-height:28px;width:40px;"> page <a id="dataTable-btn" href="javascript:jumpPage($data.pages);" rel="external nofollow" style="margin-bottom:5px">Confirm</a> #end </div> <div p_sortinfo="$!{data.orderBy}" p_isFirst=$!{data.isFirst} p_isLast=$!{data.isLast} p_currentpagenum="$!{data.pageNum}" p_totalsize="$!{data.total}" p_endrow="$!{data.endRow}" p_totalpagesnum="$!{data.pages}" p_pagesize="$!{data.pageSize}" p_startrow="$!{data.startRow}" style="display:none"></div> #endpageUtil is a tool class written in velocity toolbox, which is used to imitate the logic of pagination page number display of Datatables paging bars:
public class PageUtil { public static LinkedList<Integer> range(Integer len,Integer start) { LinkedList<Integer> out = new LinkedList<>(); Integer end; if (start == null ) { start = 0; end = len; } else { end = start; start = len; } for (int i=start ; i<end ; i++ ) { out.add(i); } return out; } public static List<Integer> numbers (Integer page,Integer pages) { LinkedList<Integer> numbers = new LinkedList<>(); Integer buttons = 7; Integer half = buttons / 2; if (pages <= buttons ) { numbers = range( 0, pages ); } else if ( page <= half ) { numbers = range( 0, buttons-2 ); numbers.add(-1000); numbers.add( pages-1 ); } else if ( page >= pages - 1 - half ) { numbers = range( pages-(buttons-2), pages ); numbers.addFirst(-1000 ); //Put numbers.addFirst(0 ); } else { numbers = range( page-1, page+2 ); numbers.add( -1000 ); numbers.add( pages-1 ); numbers.addFirst(-1000 ); numbers.addFirst(0 ); } List<Integer> res = new ArrayList<>(); for (Integer integer : numbers) { res.add(integer+1); } return res; } }And this logic is found in the js source code of Datatables, and I converted it into java code. This part of the code of Datatables source code is as follows
function _numbers ( page, pages ) { 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 ); numbers.push( 'ellipsis' ); numbers.push( pages-1 ); } else if ( page >= pages - 1 - half ) { numbers = _range( pages-(buttons-2), pages ); numbers.splice( 0, 0, 'ellipsis' ); // no unshift in ie6 numbers.splice( 0, 0, 0 ); } else { numbers = _range( page-1, page+2 ); numbers.push( 'ellipsis' ); numbers.push( pages-1 ); numbers.splice( 0, 0, 'ellipsis' ); numbers.splice( 0, 0, 0 ); } numbers.DT_el = 'span'; return numbers; } var _range = function ( len, start ) { var out = []; var end; if ( start === undefined ) { start = 0; end = len; } else { end = start; start = len; } for ( var i=start ; i<end ; i++ ) { out.push( i ); } return out; };I encapsulated the page's ajax request pagination data:
/** * */ // Macro pagination page jump to call the method, the page called needs to provide the goPage(redirectpage) method function jumpPage(totalPage) { var redirectpage = $("#changePage").val(); if(redirectpage == ""){ $("#changePage").focus(); }else{ var rex = /^/d+$/; if(!rex.test(redirectpage)){ alert("The page number is entered incorrectly, you can only enter a positive integer that is not greater than the total number of pages"); }else{ var pageNo = parseInt(redirectpage); if(pageNo <= 0 || pageNo > totalPage){ alert("The page number is entered incorrectly, only positive integers that are not greater than the total number of pages"); }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); options = $.extend(defaults,options); var ajaxData = { "pageNo":options.pageNo, "pageSize":options.pageSize }; this.fnDraw = function(pageNo) { if (typeof (options.data) == 'function') { ajaxData = options.data(ajaxData); } else { ajaxData = $.extend(ajaxData,options.data); } if (pageNo != undefined) { ajaxData['pageNo'] = pageNo; } $.ajax({ url: options.url, async: false, type:"post", data: ajaxData, success: function(result,code,dd) { _self.html(result); if (typeof options.pageSuccess == 'function') { options.pageSuccess(); } }, error:function(){ alert("Operation failed"); } }); }; this.init = function() { this.fnDraw(1); return this; } return this; }Call on the main page:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> #set($ctx = ${request.getContextPath()}) <link rel="stylesheet" type="text/css" href="$ctx/assets/js/dataTables/jquery.dataTables.min.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="$ctx/assets/js/dataTables/css/jquery.dataTables_theme.css" rel="external nofollow" /> <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"></script> </head> <body> <div id="pageDiv"> </div> <script type="text/javascript"> var pagenation = $("#pageDiv").pagenation({ url:"${ctx}/listData.do", pageSize:20, data:function (data) { $("#searchForm [name]").each(function(i, n){ data[$(n).attr('name')] = n.value; }); return data; }, pageSuccess:function(){ } }).init(); function goPage(pageNo) { pagenation.fnDraw(pageNo); } </script> </body> </html>The pageSuccess parameter is used to some operations that need to be done after ajax returns data successfully.
What I said here is not clear. The git address attached to the code cloud is: http://git.oschina.net/ivwpw/pagenation
There is no part of inserting data from the database, but it only simulates the data required by the page in the Controller.
The above article springMVC+velocity’s partial refresh pagination method for imitating Datatables is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.