rendering multiple sortable tables per gsp page?

I want to create a gsp page that contains several tables. Note that with the term "tables" I mean graphical tables ( tag) not database tables. The tables shall have sortable headers

If a gsp page contains only one table it is easy to开发者_Python百科 use the existing sortableColumn and paginate tags. They insert relevant entries to the "params" map (e.g. "sort=column4711"). However if several graphical tables are involved on the page this does not work that easy. The problem is that the associated controller does not know which table the params are associated with (i.e. if there is a map entry "sort=column4711" the controller does not know to which table it belongs).

I am currently thinking of the following solution that I consider quite ugly:

<div class="list">
                <table>
                    <thead>
                        <tr>

                            <g:sortableColumn property="id" title="${message(code: 'user.id.label', default: 'Id')}" />

                            <g:sortableColumn property="password" title="${message(code: 'user.password.label', default: 'Password')}" />

                            <g:sortableColumn property="userId" title="${message(code: 'user.userId.label', default: 'User Id')}" />

                            <g:sortableColumn property="userName" title="${message(code: 'user.userName.label', default: 'User Name')}" />


                            <g:sortableColumn property="id" title="${message(code: 'bookDetails.id.label', default: 'Id')}" />

                            <th><g:message code="bookDetails.bookId.label" default="Book Id" /></th>

                            <g:sortableColumn property="pages" title="${message(code: 'bookDetails.pages.label', default: 'Pages')}" />

                            <g:sortableColumn property="price" title="${message(code: 'bookDetails.price.label', default: 'Price')}" />



                            <g:sortableColumn property="id" title="${message(code: 'book.id.label', default: 'Id')}" />

                            <g:sortableColumn property="author" title="${message(code: 'book.author.label', default: 'Author')}" />

                            <g:sortableColumn property="bookId" title="${message(code: 'book.bookId.label', default: 'Book Id')}" />

                            <g:sortableColumn property="bookName" title="${message(code: 'book.bookName.label', default: 'Book Name')}" />

                            <g:sortableColumn property="category" title="${message(code: 'book.category.label', default: 'Category')}" />

                        </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>${fieldValue(bean: userInstance, field: "password")}</td>

                            <td>${fieldValue(bean: userInstance, field: "userId")}</td>

                            <td>${fieldValue(bean: userInstance, field: "userName")}</td>

                        </tr>
                    </g:each>

                    <g:each in="${bookDetailsInstanceList}" status="i" var="bookDetailsInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">

                            <td><g:link action="show" id="${bookDetailsInstance.id}">${fieldValue(bean: bookDetailsInstance, field: "id")}</g:link></td>

                            <td>${fieldValue(bean: bookDetailsInstance, field: "bookId")}</td>

                            <td>${fieldValue(bean: bookDetailsInstance, field: "pages")}</td>

                            <td>${fieldValue(bean: bookDetailsInstance, field: "price")}</td>

                        </tr>
                            </g:each>

                    <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: "bookId")}</td>

                            <td>${fieldValue(bean: bookInstance, field: "bookName")}</td>

                            <td>${fieldValue(bean: bookInstance, field: "category")}</td>

                        </tr>
                    </g:each>




                    </tbody>
                </table>
            </div>

        </div>
   <body>

so please guide us to solve the problem

---

There's a remote pagination plugin. It had some issues that I had to fix, but I don't have my modified version of it (and it's been a while since I used it). Basically it makes Ajax calls instead of rendering the entire page. You get tags for remoteSortableColumn and remotePaginate