Pagination Display Position Custom Module

1

Pagination Placement. When I have my custom module list in a Table tag it puts the pagination on the top of the list. Any other format puts the pagination on the bottom of the list.

Example

<table>
{% component source: "Sports Schedule", layout: "Prep Table", displayPagination: "true", searchScope: "{'prop_GameDate_Min':'{{ 'now' | date: '%Y-%m-%d' }}'}", sortBy: "GameDate", sortOrder: "ASC", limit: "25", type: "module" %}
</table>

Result Shown here.

Screen Shot 2020-08-25 at 2.22.23 PM
Screen Shot 2020-08-25 at 2.22.23 PM2142×448 39.1 KB


Any other format the Pagination is on the bottom. Even if I keep the same list layout and change the tag from **table** to **div** displays the pagination on the bottom.

<div>
{% component source: "Sports Schedule", layout: "Prep Table", displayPagination: "true", searchScope: "{'prop_GameDate_Min':'{{ 'now' | date: '%Y-%m-%d' }}'}", sortBy: "GameDate", sortOrder: "ASC", limit: "25", type: "module" %}
</div>

Results shown here

Screen Shot 2020-08-25 at 2.25.38 PM
Screen Shot 2020-08-25 at 2.25.38 PM2142×384 23.7 KB

I would like it to display at the bottom. Any thoughts.

2

Hi @Rhatch. Pagination is placed right after the items output (Layout) so I’m guessing it’s placing it inside your <table> element but outside any tr so it’s probably breaking the HTML layout a bit.

You could try rendering it as a collection instead so that you can include the <table> wrapper within the Layout.

3

Just tested this and yeah, the pagination div and ul are adding into the <table> element in an invalid way so the browser boots it out of the table.
you can see the different if you view the page source in comparison to inspecting the code with the browser dev tools.

Changing the layout method to a collection works though.
To do this you add object: "collection" to your module component tag.
Then remove the <table> wrapper around the component tag and instead wrap your Layout code like this:

{% for item in this.items %}
<table>
    <!-- YOUR EXISTING TABLE ROW LAYOUT -->
    <!-- BUT, CHANGE ALL `this` references to `item`. eg: {{this['name']}} change to {{item['name']}} -->
</table>
{% endif %}

The pagination will then be added after the Layout code and therefore outside and underneath your table markup.