プロジェクトで以前のモジュールで使用されているページネーションプラグインはDatatablesであったため、非常に便利ですが、新しく作成されたモジュールテーブルのレイアウトが変更されており、Datatablesプラグインはそれを満たすことができません。スタイルを統合し、ページのクエリパラメーターを渡してエコーしたくないため、ページの部分的なリフレッシュの実装ソリューションが採用されています。
実装計画は次のとおりです。テーブルパーツを抽出し、ページの部分的な更新の一部として使用します。ファイル名はlist-data.vmです
<表> <thead> <tr> <th> username </th> <th> age </th> </tr> </thead> <tbody> #foreach($ in $!{page.list})<tr> <td> $ #pagenation($!{page})ポンペネーションは、定義で定義されたマクロであり、ボトムページバーとページバーを表示するために使用されます。ページオブジェクトは、AJAXリクエストによって返されるページデータです。各ajax要求は、ページデータを照会し、list-data.vmに対応するビューのModelandViewオブジェクトにデータを配置し、ModelandViewオブジェクトを返し、メインページテーブルのある部分にこの部分を追加します。
マクロ部分は次のとおりです。
#macro(pagenation $ data)#if(!$ data.list.size()または$ data.list.size()== 0)<div style = "height:line-height:40px; text-align:center; font-size:14px;"> record Not </div> id = "ActivityTable_Info" ROLE = "STATUS" ARIA-LIVE = "POLITE"> show $!{data.startrow}から$ $ {data.nextPage})<a #if($ data.pagenum == 1)disabled = "disabled" href = "javascript:void(0)" rel = "returation nofollow" rel = "external nofollow" #else pagenum = "1" href = "javascript:" rel = "rel =" rel = "rel =" end " 2px; " > home </a> <a #if($ data.pagenum == 1)disabled = "disabled" href = "javascript:void(0)" rel = "returation nofollow" rel = "returation nofollow"#else pagenum = "$ predpage" href = "javascript:gopage($ prev =" rel = "rel =" rel = "rel =" rel = "rel =" 2px; " >前のページ</a> #set($ temp = $ {data.pagenum} - 1)#set($ numbers = $!{pageutil.numbers($ data.pages)})#foreach($ foo in $ numbers) #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 = "externation nofollow" #endend style = "2ppx;" >次のページ<a #if($ data.pagenum == $ data.pages)disabled = "disabled" href = "javascript:void(0)" rel = "rextern nofollow" relieg nofollow "#else pagenum =" $ data.pages "href =" javascript: "rel =" rel = "leclow" leclow " #else pagenum = "$ data.pages" href = "javascript:gopage($ data.pages)" rel = "external nofollow" #end> last page </a> <input id = "changepage" type = "maxpage =" 10 "style =" height:28px; width:width:width:28px; width:28px; width:28px; width:28px; id = "datatable-btn" href = "javascript:jumpage($ 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 = "$" p_totalsize = "$!{data.total}" p_endrow = "$!{data.endrow}" p_totalpagesnum = "$!{data.pages}" p_pagesize = "$!{data.pagesize}" p_startrow = "$Pageutilは、Velocity Toolboxで記述されたツールクラスです。これは、Datatablesページングバーのページ番号表示のロジックを模倣するために使用されます。
public class pageutil {public static linkedlist <integer> range(integer len、integer start){linkedlist <integer> out = new linkedlist <>();整数端; if(start == null){start = 0; end = len; } else {end = start; start = len; } for(int i = start; i <end; i ++){out.add(i); }戻る; } public static list <integer> numbers(integerページ、整数ページ){linkedlist <integer> numbers = new linkedlist <>();整数ボタン= 7; integer half = bottons / 2; if(pages <= bottons){numbers = range(0、pages); } else if(page <= half){numbers = range(0、buttons-2); numbers.add(-1000); numbers.add(ページ1); } else if(page> = pages -1 -half){numbers = range(pages-(buttons -2)、pages); numbers.addfirst(-1000); // numbers.addfirst(0); } else {numbers = range(page-1、page+2); numbers.add(-1000); numbers.add(ページ1); numbers.addfirst(-1000); numbers.addfirst(0); } list <integer> res = new arrayList <>(); for(integer integer:numbers){res.add(integer+1); } RESを返します。 }}そして、このロジックはJSソースデータテイタブルコードにあり、Javaコードに変換しました。 Datatablesソースコードのコードのこの部分は次のとおりです
関数_Numbers(ページ、ページ){var番号= []、buttons = extpagination.numbers_length、half = math.floor(buttons / 2)、i = 1; if(pages <= bottons){numbers = _range(0、pages); } else if(page <= half){numbers = _range(0、buttons-2); numbers.push( 'ellipsis'); numbers.push(ページ1); } else if(page> = pages -1 -half){numbers = _range(pages-(buttons -2)、pages); numbers.splice(0、0、 'ellipsis'); // IE6 Numbers.splice(0、0、0)にunshiftなし; } else {numbers = _range(1ページ、ページ+2); numbers.push( 'ellipsis'); numbers.push(ページ1); numbers.splice(0、0、 'ellipsis'); numbers.splice(0、0、0); } numbers.dt_el = 'span';返品番号。 } 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); }戻る; };ページのAJAXリクエストページネーションデータをカプセル化しました。
/ ** * */ //マクロページネーションページジャンプメソッドを呼び出すには、呼び出されたページはgopage(redirectpage)メソッド関数jumpage(totalpage)を提供する必要があります{var redirectpage = $( "#changepage")。val(); 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){//デフォルトパラメーターvar defaults = {url: ""、data:{}、//パラメーターpageno:1、//ページ番号$(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.pages(); pages()、errile "; }); }; this.init = function(){this.fndraw(1);これを返します。 }これを返します。 }メインページに電話してください:
< href = "$ ctx/assets/js/datatables/jquery.datatables.min.css" rel = "external nofollow"/> <link rel = "styleSheet" type = "text/css" href = "$ ctx/assets/js/js/datatables/css <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 = $( "#pageviv")。pagenation({url: "$ {ctx} /listdata.do"、pagesize:20、data:function(data){$( "#searchform [name]")。データ;}、pagesuccess:function(){}})。関数gopage(pageno){pagenation.fndraw(pageno); } </script> </body> </html>Pagesuccessパラメーターは、Ajaxがデータを正常に返す後に行う必要がある操作に使用されます。
私がここで言ったことは明確ではありません。コードクラウドに添付されているgitアドレスは、http://git.oschina.net/ivwpw/pagenationです。
データベースからデータを挿入することの一部はありませんが、コントローラーのページで必要なデータのみをシミュレートします。
上記の記事SpringMVC+VelocityのDatatablesを模倣するための部分的な更新ページネーション方法は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。