锐客网

  1. 首页 > 睿知 > it技术 > >

Grails App中的双重分页问题

IT知识问题分页中的

【Grails App中的双重分页问题】青春须早为，岂能长少年。这篇文章主要讲述Grails App中的双重分页问题相关的知识，希望能为你提供帮助。
我在Grails 2.3.11和Groovy 2.1.9上（我现在无法做出升级的决定）。我有一些代码，我从一篇文章中借用来实现ajax列表，在this link中进行分页，过滤和排序
它的工作正常，除了分页。当我按降序排序网格时，我得到两个分页div。当我按升序排序（ajax请求）时，它只是一个div（因为这会导致实际的页面重新加载）。我查看了代码，我看不出为什么ajax请求会导致双重分页。
为简单起见，我在文章中使用相同的代码作为测试，我得到了相同的问题。任何人都可以看到什么是错的？
控制器动作

def list = { def query = { if (params.name) { ilike('lastName', '%' + params.name + '%') } if (params.sort){ order(params.sort,params.order) } }def criteria = User.createCriteria() params.max = Math.min(params.max ? params.int('max') : 20, 100) def users = criteria.list(query, max: params.max, offset: params.offset) def filters = [name: params.name]def model = [userInstanceList: users, userInstanceTotal: users.totalCount, filters: filters]if (request.xhr) { // ajax request render(template: "grid", model: model) } else { model } }

的list.gsp
< html> < head> < meta name="layout" content="main" /> < g:set var="entityName" value="https://www.songbingjia.com/android/${message(code:'user.label', default: 'User')}" /> < title> < g:message code="default.list.label" args="[entityName]" /> < /title> < /head> < body> < h2> < g:message code="default.list.label" args="[entityName]" /> < /h2> < g:if test="${flash.message}"> < div class="message"> ${flash.message}< /div> < /g:if> < br /> < div class="filters"> < g:form action="list"> < p> < label for="name"> Name< /label> < g:textField name="name" value="https://www.songbingjia.com/android/${filters?.name}" /> < /p> < p> < g:submitButton name="filter" value="https://www.songbingjia.com/android/Filter" /> < /p> < /g:form> < /div> < br /> < div id="grid"> < g:render template="grid" model="model" /> < /div> < br /> < p> < g:link action="create"> < g:message code="default.new.label" args="[entityName]" /> < /g:link> < /p> < script> $(document).ready(function() { setupGridAjax(); setupFilterAjax(); }); // Turn all sorting and paging links into ajax requests for the grid function setupGridAjax() { $("#grid").find(".paginateButtons a, th.sortable a").live('click', function(event) { event.preventDefault(); var url = $(this).attr('href'); var grid = $(this).parents("table.ajax"); $(grid).html($("#spinner").html()); $.ajax({ type: 'GET', url: url, success: function(data) { $(grid).fadeOut('fast', function() {$(this).html(data).fadeIn('slow'); }); } }) }); }// Turn any input changes or form submission within a filter div into an ajax call function setupFilterAjax() { $('div.filters :input').change(function() { var filterBox = $(this).parents("div.filters"); filterGrid(filterBox); }); $("div.filters form").submit(function() { var filterBox = $(this).parents("div.filters"); filterGrid(filterBox); return false; }); }// Reload grid based on selections from the filter function filterGrid(filterBox) { var grid = $(filterBox).next("div.grid"); $(grid).html($("#spinner").html()); var form = $(filterBox).find("form"); var url = $(form).attr("action"); var data = https://www.songbingjia.com/android/$(form).serialize(); $.ajax({ type:'POST', url: url, data: data, success: function(data) { $(grid).fadeOut('fast', function() {$(this).html(data).fadeIn('slow'); }); } }); } < /script> < /body> < /html>

_grid.gsp
< table class="ajax"> < thead> < tr> < g:sortableColumn property="id" title="Id" params="${filters}" /> < g:sortableColumn property="isActive" title="Is Active" params="${filters}" /> < g:sortableColumn property="name" title="Name" params="${filters}" /> < /tr> < /thead> < tbody> < g:each in="${userInstanceList}" status="i" var="userInstance"> < tr class="${(i % 2) == 0 ? 'odd' : 'even'}"> < td> < g:link action="show" id="${userInstance.id}"> ${fieldValue(bean: userInstance, field: "id")}< /g:link> < /td> < td> < g:formatBoolean boolean="${userInstance.isActive}" /> < /td> < td> ${fieldValue(bean: userInstance, field: "name")}< /td> < /tr> < /g:each> < /tbody> < /table> < div class="pagination"> < g:paginate total="${userInstanceTotal}" params="${filters}" /> < /div>

答案发布这个问题后我发现了问题（当然）。
这一行：var grid = $(this).parents("table.ajax");
只寻找一个带有ajax类的表。分页div恰好不符合该标准。解决方法是将整个_grid模板代码包装在具有id属性的div中，然后在上面的行中使用该id。它看起来像这样：
var grid = $(this).parents("#idOfNewDiv");

    推荐阅读


    上一篇：永远不会调用WebApplicationInitializer的onStartup方法

    下一篇：如何在Android上解密lua char tonumber