如何在多个表中管理分页? [英] How to manage pagination in multiple tables in grails?
问题描述
我的gsp页面中有两个表(部分)，我需要对它们两个都进行分页.一个表/节的每一页中的记录数是不同的(例如，第一个表每页应显示10条记录，第二个表/节应每页显示7条记录).我使用标签实现了它.当我这样做时，我遇到了很多如下所述的问题.
I have two tables(sections) in my gsp page and I need to implement pagination on both of them. The number of records in each page of a table / section is different(eg. first table should show 10 records per page and second table / section should display 7 records per page). I implemented it using tag. When I did so, I got lots of problems as mentioned below.
-
最初，它显示每个表给定的记录数.但是，当我单击一页中的下一步"按钮时，整个页面都会刷新，并且两个表都转到第2页，依此类推.当所有页面都在一个页面中完成，然后在另一张表中单击下一步"时，它会显示该表的空白页面，页面数较少，而下一张表则显示新页面.例如:如果表1有5页，表2有9页，则当我们转到第二个表的第6页时，第一个表显示为空白.
Initially it shows number of records as given for each tables. But when I click Next button in one page, whole page gets refreshed and both tables goes to page 2 and so on. When all pages are done in one page and click next in the other table, it shows shows blank page for the table with less number of pages and next table shows new page. Eg: If table 1 has 5 pages and table 2 has 9 pages, when we go to page 6 of second table, first table is shown BLANK.
有时，当我单击下一步"按钮时，显示的记录数不一致.例如.有时每页显示10条记录，下一次显示5条这样的记录.这两个表都发生这种情况.
Sometimes, when I click next button, the number of records displayed are not consistent. Eg. Sometimes it shows 10 records per page, next time 5 records like this. This happens for both the tables.
这是对控制器方法的常规调用，而不是ajax调用.您能给我Ajax调用示例吗?
This is a normal call to the controller method and not the ajax call. Could you please give me sample of ajax call?
有人可以帮助我解决这些问题吗?如果有人可以给我用于多个分页实现的控制器和gsp页面的代码，我将不胜感激.
Could any one help me with these issues?I would really appreciate if anyone could give me the code for the controller and gsp page for multiple pagination implementation.
谢谢.
推荐答案
首先让我们假设您具有以下类.
First lets assume that you have the following classes.
语言
class Language {
String name
static constraints = {}
}
PERSON
class Person {
String name
static constraints = {}
}
首先，我们需要定义是否要使用AJAX.这是为什么?因为在使用静态页面时，您将需要将两个分页的参数传递给控制器动作或从控制器动作传递.使用AJAX时，执行两个不同的操作会更加有用，这样您就不必将所有参数都传递给该操作.
First we need to define whether we are going to use AJAX or not. Why is that? Because when using static pages you will need to pass the params of both paginates to and from a controller action. When using AJAX it would be more useful to have two different actions so you won´t have to pass all params to the action.
在此示例中，我们将通过更简单的AJAX路径.
For this example we are going to go through the simpler AJAX path.
首先，我们需要确定分页标签需要哪些数据.
First we need to identify what data we need for a paginate tag.
- 总计:该标记是标签所需的
- 操作:由于我们将要执行2个不同的操作，因此我们需要指定代码将使用哪个操作
- 控制器:如果您在不同的控制器中生成列表
- 偏移量:页面的偏移量
- 最大值:页面中的最大元素数
- Total: This one required for the tag
- action: Since we are going to have 2 different actions, then we need to specify which action will be used by the tag
- Controller: In case you generate the lists in diferent controllers
- offset: The offset of the page
- max: The max number of elements in the page
现在让我们假设将两个动作都放在一个名为main的控制器中.
Now lets assume that we are going to put both actions in a single controller named 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，因此我们应该使用模板进行渲染.我们将创建一个模板来为每个动作呈现
Since we are going to work with ajax then we should use templates to render. We are going to create a template to render for each action
语言模板 _languateList
Language template _languateList
<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
Persona Template _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函数将click事件处理程序添加到由paginate标记创建的所有链接中.对于每个表的默认情况，我们使用include标记.我们还定义了两个元素，每个列表将在其中加载其新内容.
And finally in our view we need to add a little jquery. The jquery function adds the click event handler to all the links that are created by the paginate tag. For the default case for each table we use the include tag. We also define two elements where each list will load its new content.
<!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分页的列表.
This is the simplest example that I could come up with where you can have two ajax-paginated lists in the same view.
这篇关于如何在多个表中管理分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
