Поскольку плагин на странице, используемый предыдущим модулем в проекте, был DataTables, он очень удобен, но макет в недавно изготовленной таблице модулей изменился, и плагин DataTables не может соответствовать его. Чтобы объединить стиль, и не хотят передать и повторять параметры запроса на странице, принят решение реализации частичного обновления На странице.
План реализации подобен следующему: извлечь часть таблицы и используйте ее как часть частичного обновления страницы. Имя файла-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> $! #pagenation ($! {page})Пагенация - это макрос, определяемый определением, который используется для отображения нижней страницы и панели страниц. Объект страницы - это данные страницы, возвращаемые запросом AJAX. Каждый запрос AJAX, запросите данные по страницам, вставьте данные в объект ModelAndView представления, соответствующий списку Data.vm, а затем верните объект ModelAndView, добавьте эту часть в часть, где таблица основной страницы.
Макро -часть заключается в следующем:
#macro (pagenation $ data) #if (! $ data.list.size () или $ data.list.size () == 0) <div style = "Высота: 40px; линейная высота: 40px; text-align: center; font-size: 14px;"> not word </diving> #end #if ($ data.size () и $ data. id = "Activitytable_info" rol = "vature" aria-live = "celite"> show $! {data.startrow} до $! {data.endrow} $ {data.nextpage}) <a #if ($ data.pagenum == 1) Disabled = "disabled" href = "javascript: void (0)" rel = "nofollow" rel = "infollow" #else pagenum = "1" href = "javascript: gpage (1)" rel = "noflow =" #№ " > Главная </a> <a #if ($ data.pagenum == 1) Disabled = "disabled" href = "javaScript: void (0)" rel = "внешний nofollow" rel = "nofollow" #else pagenum = "$ prevpage" hRef = "javascript: gopage ($ prevpage)" rel = "nofuthold" # # # # # # # # # # # # # # # # # # #№ " > Предыдущая страница </a> #Set ($ temp = $ {data.pagenum} - 1) #Set ($ numbers = $! {Pageutil.numbers ($ temp, $ data.pages)}) #foreach ($ foo in $ numbers) #if ($ foo == -999) <pan>… </span> #else <a pagenum = "$ foo" $ #if ($ foo! = $ {data.pagenum}) href = "javaScript: Gopage ($ foo)" rel = "внешний 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 = "enferlolow" #else pagenum = "$ data.pages" hRef = "javascript: gopage ($ data.pages)" rel -nof noflow "noflow" noflow "noflow 'noflow" noflow "noflow" noflow "href =" javascr pagenum = "$ data.pages" href = "javascript: gopage ($ data.pages)" rel = "внешний nofollow" #end> последняя страница </a> перейти к <input id = "mediepage" type = "text" maxPage = "10" Style = "Высота: 28px; Line-heigh 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 = $! p_totalsize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_pagesize = "$! {data.pagesize}" p_startrow = "$!PageUtil - это класс инструментов, написанный в Velocity Toolbox, который используется для имитации логики номера страниц страницы страниц.
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 page, integer pages) {linkedlist <Integer> numbers = new LinkedList <> (); Целочисленные кнопки = 7; Целое число половины = кнопки / 2; if (pages <= кнопки) {numbers = range (0, pages); } else if (page <= половина) {номеры = диапазон (0, кнопки-2); numbers.add (-1000); numbers.add (стр. 1); } else if (page> = pages - 1 - половина) {номеры = диапазон (страницы- (кнопки -2), страницы); 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 <> (); для (целое число целого числа: числа) {res.add (Integer+1); } return res; }}И эта логика находится в исходном коде DataTables JS, и я преобразовал ее в код Java. Эта часть кода исходного кода DataTables заключается в следующем
function _numbers (page, pages) {var numbers = [], buttons = extpagination.numbers_length, половина = math.floor (кнопки / 2), i = 1; if (pages <= кнопки) {numbers = _range (0, pages); } else if (page <= половина) {numbers = _range (0, кнопки-2); numbers.push ('ellipsis'); numbers.push (страницы-1); } else if (page> = pages - 1 - половина) {numbers = _range (pages- (кнопки -2), страницы); numbers.splice (0, 0, 'ellipsis'); // нет неосвязного в ie6 numbers.splice (0, 0, 0); } 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) jumppage (total -page) {var redirectpage = $ ("#изменение страдания "). Val (); if (redirectpage == "") {$ ("#изменение страдания"). 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 (опции) {// Параметры по умолчанию var default _self = $ (это); опции = $ .extend (default, опции); var ajaxdata = {"pageno": опции. 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, успех: функция (результат, код, dd) {_self.html (result); if (typeof options.pagesuccess == 'function') {options.pagescess ();}}}, erry () {) amer () amer () {) amer () {) {) }); }; this.init = function () {this.fndraw (1); вернуть это; } вернуть это; }Позвоните на главную страницу:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> вставьте заголовок здесь </title> #Set ($ ctx = $ {request.getContextPath ()}) <link rel = "styleShept" type = "text/css" href = "$ ctx/assets/js/dataTables/jQuery.dataTables.min.css" rel = "внешний nofollow"/> <link rel = "styleSheet" type = "text/css" href = "$ ctx/assets/js/dataTables/css/jquery.datatables_theme.cssse/js/datatables/css/jquery.dataTables_theme.clowse. 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 = $ ("#pageginiv"). Pagenation ({url: "$ {ctx}/illistdata.do", pagesize: 20, data: function (data) {$ ("#searchform [name]"). Каждая (i, n) {data [$). data; функция Gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>Параметр Pagesuccess используется для некоторых операций, которые необходимо выполнить после успешного возврата данных Ajax.
То, что я сказал здесь, не ясно. Адрес GIT, прикрепленный к Code Cloud: http://git.oschina.net/ivwpw/pagenation
Не существует части вставки данных из базы данных, но они имитируют только данные, необходимые странице в контроллере.
Приведенная выше статья Springmvc+Velocity частично обновления страдания для имитации данных DataTables - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.