location of pagination controls in dandelion datatables

Question

I am making some modifications to the spring petclinic application, and I need to place the pagination control for a dandelion datatable at the bottom, underneath the table. The filter needs to be at top, and users will almost always filter results to less than 10 records, so the pagination controls can safely be at the bottom. How do I accomplish this? What specific changes do I make to the code below to make this happen?

Here is the link:

Here is my current code for the datatable, which produces the jumbled results shown above. How do I change it so that the pagination control (select number of results) is on the bottom, with the filter criteria box remaining on top?

<datatables:table id="owners" data="${selections}" cdn="true" row="owner" theme="bootstrap2" 
                  cssClass="table table-striped" paginate="true" info="false" 
                  cssStyle="width: 150px;" align="left" >
<datatables:column title="Name" cssStyle="width: 150px;" display="html">
    <spring:url value="/owners?ownerID={ownerId}" var="ownerUrl">
        <spring:param name="ownerId" value="${owner.id}"/>
    </spring:url>
    <a href="${fn:escapeXml(ownerUrl)}"><c:out value="${owner.firstName} ${owner.lastName}"/></a>
</datatables:column>
</datatables:table>

Note: Hiding the dropdown that selects the number of records per page would also be acceptable, as long as the number defaults to 10 and as long as the arrow buttons to scroll through pages remain at the bottom.

Answer 1

You can play with the dom table attribute (and probably a bit of CSS) to move controls around the table. You can find the original reference here.

<datatables:table id="owners" data="${selections}" ... dom="frtp" >
    ...
</datatables:table>