Grails远程分页刷新整个页面而不是div [英] Grails remote-pagination is refreshing entire page instead of div
本文介绍了Grails远程分页刷新整个页面而不是div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用grails插件remote-pagination时遇到问题。我创建了一个新项目并复制粘贴插件的示例代码。有一个书籍类有一个列表视图和表格的模板。分页应该只更新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-Typecontent =text / html; charset = UTF-8/>
< meta name =layoutcontent =main/>
< / head>
< body>
< div class =nav>
< span class =menuButton>< a class =homehref =$ {createLink（uri：'/'）}>< g：message code =default.home .label/>< / A>
< / span>
< span class =menuButton>< g：link class =createaction =create>< g：message code =default.new.labelargs =[entityName ]/>< /克：链接>< /跨度>
< / div>
< div class =body>
< h1>< g：message code =default.list.labelargs =[entityName]/>< / h1>
< / g：if>
< div id =filteredList>
< / div>
< / body>
< / html>
_filtered.gsp - 书籍模板
< div>
< div class =list>
< table>
< thead>
< tr>
< util：remoteSortableColumn property =nametitle =$ {message（code：'book.name.label'，default：'Name'）}update =filteredListaction = filtermax =5/>
< util：remoteSortableColumn property =pricetitle =$ {message（code：'book.price.label'，default：'Price'）}update =filteredListaction = 过滤器/>
< / tr>
< / thead>
< tbody>
$ b $ lt; td>< g：link action =showid =$ {bookInstance.id}> $ {fieldValue（bean：bookInstance，field：id）}< /克：链接>< / TD>
< td> $ {fieldValue（bean：bookInstance，field：author）}< / td>
< td> $ {fieldValue（bean：bookInstance，field：name）}< / td>
< td> $ {fieldValue（bean：bookInstance，field：price）}< / td>
< / tr>
< / g：每个>
< / tbody>
< / table>
< / div>
< div class =paginateButtons>
< / div>
解决方案
我只需要在list.gsp页面的header部分：
< g：javascript library =jquery/>
I am having problems with the grails plugin remote-pagination. I have created a new project and copy pasted the sample code for the plugin. There is a book class that has a list view and a template for the table. The pagination is supposed to update only the data in the div 'filteredList', but instead the page is refreshed with the layout view, _filtered.gsp, only. Below is the code :
Controller:
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 - view :
<%@ 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 - template for table of books
<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>
解决方案
I just had to add the javascript library tag in the header section of the list.gsp page :
<g:javascript library="jquery" />
这篇关于Grails远程分页刷新整个页面而不是div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
