プロジェクトで以前のモジュールで使用されているページネーションプラグインは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をもっとサポートできることを願っています。