EE3 pagination loop incompatible with Bootstrap

Question

I'm building a site using EE 3.3.1 and Bootstrap 3.3.6

I'm trying to output a list of news articles which are paginated. But the only way I can show the pagination is to repeat the channel entries query further down the page, because otherwise it causes repetitions of the markup.

This is the area where the problem starts:

<div class="row">

    <div class="col-md-9">
        {exp:channel:entries channel='news' orderby='date' sort='desc' limit="10" paginate="bottom"}
        <div class="col-md-6 mb-45">
            <h3 class="mb-25"><a href="{url_title_path='news-article'}">{title}</a></h3>
        </div>
        {/exp:channel:entries}

    </div><!-- /.col-md-9 -->

    <div class="col-md-3">
        <div class="row">
            <h4>Browse by category</h4>
            {exp:channel:categories show_empty="no" category_group="4"}
            <a href="{path='news/index'}"{if active} class="active"{/if}>{category_name}</a>
            {/exp:channel:categories}
        </div>
    </div><!-- /.col-md-3 -->

</div><!-- /.row -->

The pagination code needs to be inside

    {exp:channel:entries} {/exp:channel:entries} 

But I want to display it at the bottom of the page, therefore it needs to be outside

    <div class="row">  </div>

I can't move the closing

           {/exp:channel:entries}         

tag lower down, otherwise it will repeat all the markup (e.g. where Browse by Category, see .col-md-3) up to 10 times (10 being the limit on the query).

The only solution I came up with was to add this outside the original row. But this means repeating the query, which is not DRY.

<div class="row">
    {exp:channel:entries channel='news' orderby='date' sort='desc' limit="10" paginate="bottom"}
    {paginate}
    {pagination_links}
    <ul class="pagination">
        {first_page}
        <li><a href="{pagination_url}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        {/first_page}
        {page}
        <li{if current_page} class="active"{/if}><a href="{pagination_url}">{pagination_page_number}</a></li>
        {/page}
        {last_page}
        <li><a href="{pagination_url}" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
        {/last_page}
    </ul>
    {/pagination_links}
    {/paginate}
    {/exp:channel:entries}
</div>

How can I improve this?

Answer 1

You should be put the pagination query within the first channel:entries loop and capture the output using the Stash add-on.

There is a worked example of moving pagination to later on a page in the stash wiki

HTH