[英]Grails remote-pagination is refreshing entire page instead of div
我有grails插件遠程分頁的問題。 我創建了一個新項目並復制粘貼插件的示例代碼。 有一個書類,它有一個列表視圖和表的模板。 分頁應該僅更新div“filteredList”中的數據,而是僅使用布局視圖_filtered.gsp刷新頁面。 以下是代碼:
控制器:
class BookController {
def scaffold = true
def list = {
[bookInstanceList: Book.list(max:10,offset: 0), bookInstanceTotal: Book.count()]
}
def filter = {
params.max = Math.min(params.max ? params.int('max') : 10, 100)
render(template: 'filter', model: [bookInstanceList: Book.list(params), bookInstanceTotal: Book.count()])
}
}
list.gsp - 查看:
<%@ page import="com.intelligrape.Book" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="main"/>
<g:set var="entityName" value="${message(code: 'book.label', default: 'Book')}"/>
<title><g:message code="default.list.label" args="[entityName]"/></title>
</head>
<body>
<div class="nav">
<span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a>
</span>
<span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]"/></g:link></span>
</div>
<div class="body">
<h1><g:message code="default.list.label" args="[entityName]"/></h1>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<div id="filteredList">
<g:render template="filter"/>
</div>
</div>
</body>
</html>
_filtered.gsp - 書籍模板
<div>
<div class="list">
<table>
<thead>
<tr>
<util:remoteSortableColumn property="id" title="${message(code: 'book.id.label', default: 'Id')}" update="filteredList" action="filter"/>
<util:remoteSortableColumn property="author" title="${message(code: 'book.author.label', default: 'Author')}" update="filteredList" action="filter"/>
<util:remoteSortableColumn property="name" title="${message(code: 'book.name.label', default: 'Name')}" update="filteredList" action="filter" max="5"/>
<util:remoteSortableColumn property="price" title="${message(code: 'book.price.label', default: 'Price')}" update="filteredList" action="filter"/>
</tr>
</thead>
<tbody>
<g:each in="${bookInstanceList}" status="i" var="bookInstance">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td><g:link action="show" id="${bookInstance.id}">${fieldValue(bean: bookInstance, field: "id")}</g:link></td>
<td>${fieldValue(bean: bookInstance, field: "author")}</td>
<td>${fieldValue(bean: bookInstance, field: "name")}</td>
<td>${fieldValue(bean: bookInstance, field: "price")}</td>
</tr>
</g:each>
</tbody>
</table>
</div>
<div class="paginateButtons">
<util:remotePaginate total="${bookInstanceTotal}" update="filteredList" action="filter" pageSizes="[5: '5 on Page',10:'10 on Page',15:'15 on Page']" max="5" />
</div>
</div>
我只需要在list.gsp頁面的標題部分添加javascript庫標記:
<g:javascript library="jquery" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.