首先假设您有以下课程。
LANGUAGE
class Language {
String name
static constraints = {}
}
PERSON
class Person {
String name
static constraints = {}
}
首先我们需要定义是否要使用 AJAX。这是为什么？因为使用静态页面时，您需要将两个分页的参数传递给控制器操作或从控制器操作传递参数。使用 AJAX 时，拥有两个不同的操作会更有用，因此您不必将所有参数传递给操作。
对于本示例，我们将采用更简单的 AJAX 路径。
首先，我们需要确定分页标签需要哪些数据。
-
Total:标签需要此一项
-
action:由于我们将有 2 个不同的操作，因此我们需要指定标签将使用哪个操作
-
控制器：如果您在不同的控制器中生成列表
-
offset:页面的偏移量
-
max:页面中的最大元素数
现在假设我们要将这两个操作放在一个名为 main 的控制器中。
class MainController {
/**The action that will load the list of people*/
def personaList(){
params.max = params?.max ?: 10
params.offset = params?.offset ?: 0
def personList = Person.list(params)
render template: 'personaList',
model: [
personList : personList,
personTotal: Person.count,
max: params.max,
offset: params.offset
]
}
/**The action that will load the list of languages*/
def languageList(){
params.max = params?.max ?: 10
params.offset = params?.offset ?: 0
def languageList = Language.list(params)
render template: 'languageList',
model: [
languageList : languageList,
languageTotal: Language.count,
max: params.max,
offset: params.offset
]
}
}
既然我们要使用 ajax 那么我们应该使用模板渲染。我们将创建一个模板来呈现每个动作
语言模板_语言列表
<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<g:each in="${languageList}" var="language">
<tr>
<td>${language.name}</td>
</tr>
</g:each>
</tbody>
</table>
<div class="paginate">
<g:paginate total="${languageTotal ?: fraglist.Language.count}"
controller="main" action="languageList"
max="${max ?: 10}" offset="${offset ?: 0}" />
</div>
角色模板_personList
<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<g:each in="${personList}" var="person">
<tr>
<td>${person.name}</td>
</tr>
</g:each>
</tbody>
</table>
<div class="paginate">
<g:paginate total="${personTotal ?: fraglist.Person.count}" controller="main" action="personaList"
max="${max ?: 10}" offset="${offset ?: 0}" />
</div>
最后，我们认为我们需要添加一点 jquery。 jquery 函数将单击事件处理程序添加到由 paginate 标记创建的所有链接。对于每个表的默认情况，我们使用 include 标签。我们还定义了两个元素，每个列表将在其中加载其新内容。
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Welcome to Grails</title>
</head>
<body>
<div id="table-person" class="table-container">
<g:include controller="main" action="personaList" />
</div>
<div id="table-language" class="table-container">
<g:include controller="main" action="languageList" />
</div>
<script>
(function($){
$(document).ready(function(){
$(".table-container").on('click', '.paginate a', function(event){
event.preventDefault();
var linkItem = $(this);
var target = linkItem.closest('div.table-container');
$.get(linkItem.prop('href'))
.done(function(data){
target.html(data);
}).fail(function(){
alert("There was an error loading the data");
});
});
});
})(jQuery)
</script>
</body>
</html>
这是我能想到的最简单的示例，您可以在同一视图中拥有两个 ajax 分页列表。
