Question

我的gsp页面中有两个表（部分），我需要在它们两个上实现分页。表/节的每个页面中的记录数是不同的（例如，第一个表应该每页显示10个记录，第二个表/节应该每页显示7个记录）。我用标签实现了它。当我这样做时，我遇到了很多问题，如下所述。

最初显示为每个表指定的记录数。但是当我在一个页面中单击“下一步”按钮时，整个页面会刷新，两个表都会转到第2页，依此类推。当所有页面在一个页面中完成并单击另一个表格中的下一个页面时，它会显示表格的空白页面，页面数量较少，下一个表格显示新页面。例如：如果表1有5页，表2有9页，当我们转到第二页的第6页时，第一个表显示为BLANK。
有时，当我点击下一个按钮时，显示的记录数量不一致。例如。有时它每页显示10条记录，下次有5条记录。这两个表都会发生这种情况。
这是对控制器方法的正常调用，而不是ajax调用。你能给我一个ajax电话样品吗？

任何人都可以帮我解决这些问题吗？如果有人能为我提供控制器和gsp页面的代码以供多个分页实现，我真的很感激。

提前致谢。

Answer 1

首先假设您有以下类。

<强>语言

class Language {

    String name

    static constraints = {}
}

<强> PERSON

class Person {
 String name

 static constraints = {}
}

首先，我们需要定义是否要使用AJAX。这是为什么？因为在使用静态页面时，您需要将两个paginates的params传递给控制器操作或从控制器操作传递。使用AJAX时，有两个不同的动作会更有用，所以你不必将所有参数传递给动作。

对于这个例子，我们将通过更简单的AJAX路径。

首先，我们需要确定paginate标签所需的数据。

总计：这是标签
操作：由于我们将要执行2个不同的操作，因此我们需要指定标记将使用的操作
控制器：如果您使用不同的控制器生成列表
偏移量：页面偏移量
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，因此我们应该使用模板进行渲染。我们将创建一个模板来为每个动作呈现

语言模板 _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

<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标记。我们还定义了两个元素，每个列表将加载其新内容。

<!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分页列表。

Answer 2

我不知道是否有更简单的解决方案，但在这些情况下，我复制了paginate标记的源代码并创建了一个新的secondTablePaginate标记。在GSP和源代码中将新标记的参数更改为secondTableTotal和secondTableOffset，您应该全部设置。

Answer 3

我遇到了同样的问题，在我的gsp视图中，我有两个表和两个分页器，但是当我在一个表中分页时，我使用了另一个表，我正在研究，发现了一个示例代码，该代码对我有很大帮助并解决了我的问题是，他们要做的是在会话中保存最大值和偏移量，并在g：paginate指令中使用它。我保留了指向示例和示例代码的链接：

LINK：https://code-examples.net/es/q/3de823

控制器

class PageController {

  def index = {
    if (params.paginate == 'Foo') {
      def fooPagination = [max: params.max, offset: params.offset]
      session.fooPagination = fooPagination
    } else if (params.paginate == 'Bar') {
      def barPagination = [max: params.max, offset: params.offset]
      session.barPagination = barPagination
    }
    def barList = Bar.list(session.barPagination ?: [max: 10, offset: 0])
    def fooList = Foo.list(session.fooPagination ?: [max: 10, offset: 0])
    //This is to stop the paginate using params.offset/max to calculate current step and use the offset/max attributes instead    
    params.offset = null
    params.max = null
    [fooList: fooList, totalFoos: Foo.count(), totalBars: Bar.count(), barList: barList]
  }
}

index.gsp

<html>
<head>
  <title>Multi Pagination Example</title>

  <meta name="layout" content="main"/>
  <style type="text/css" media="screen">

  h2 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 1.2em;
  }
  </style>

</head>
<body>
<table>
  <tr>
    <td>
      <h2>Foo</h2>
      <table>
        <tr>
          <th>Name</th>
        </tr>
        <g:each in="${fooList}">
          <tr><td>${it.name}</td></tr>
        </g:each>
        <tr>
          <td class="paginateButtons">
            <g:paginate total="${totalFoos}" max="10" offset="${session.fooPagination?.offset}" params="${[paginate:'Foo']}"/></td>
        </tr>
      </table>
    </td>
    <td>
      <h2>Bar</h2>
      <table>
        <tr>
          <th>Name</th>
        </tr>
        <g:each in="${barList}">
          <tr><td>${it.name}</td></tr>
        </g:each>
        <tr>
          <td class="paginateButtons">
            <g:paginate total="${totalBars}" max="10" offset="${session.barPagination?.offset}" params="${[paginate:'Bar']}"/></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>

我希望它能像我一样为您服务

如何在grails中的多个表中管理分页？

3 个答案: