Grails remote-pagination刷新了整个页面而不是div

时间:2013-04-22 03:59:29

标签: grails plugins pagination

我遇到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>

1 个答案:

答案 0 :(得分:4)

我只需要在list.gsp页面的标题部分添加javascript库标记:

<g:javascript library="jquery" />