Customize the b-pagination in bootstrap-vue

0
votes

I am using bootstrap-vue. For pagination, I used b-pagination component with the following code:

<b-pagination
    v-model="currentPage"
    :total-rows="rows"
    :per-page="perpage"
    aria-controls="my-table">
</b-pagination>

It works fine. However, I also want to add the total row count before the pagination. The following picture is what I want to achieve.

enter image description here

I checked the bootstrap-vue document, there is no slot for customization. Any suggestion how to customize the b-pagination component?

2
vue.jsbootstrap-vue

2 Answers

1
votes

Finally it seems to be a simple CSS question. The following code will combine the pagination part and the total page count part.

   <div style="display: flex;margin:0;padding:0;width:400px;">
        <div style="margin:0;padding:0;width:300px;">
            <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perpage"
                aria-controls="my-table">
            </b-pagination>
        </div>
        <div style="margin:auto;text-align: left;">
            <ul  class="pagination">
                <li class="page-item active"><a class="page-link">Total {{rows}}</a></li>
            </ul>
        </div>
    </div>

And it will generate the following pagination effect: enter image description here