CODEWITHSUNDEEP
cssangularjstwitter-bootstrappagination
Nickon
Nickon

Reputation: 10146

AngularJS pagination in separate columns

I have pagination working in my app. I display 10 elements per page. Now I would like to format these 10 elements into 2 columns (2x 5 elements per 1 page).

I don't know how to start.

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize" class="pagination-small" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>

Code reference:

http://jsfiddle.net/eqCWL/224/

Upvotes: 0

Views: 286

Answers (1)

Vinko Bradvica
Vinko Bradvica

Reputation: 466

In your fiddle you are using the older bootstrap2 css, so I'll use it here for the solution:

First, you need to read the bootstrap documentation on scaffolding/grid system

format your HTML to show two lists in two rows:

<div class="row">
  <div class="span6">
      <li>{{data.name}}</li>
  </div>
  <div class="span6">
      <li>{{data.name}}</li>
  </div>
</div>

then, you will need to set the first ng-repeat to show only half of items:

ng-repeat="data in filtered = (list | filter:search) | 
startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit/2"

notice limitTo:entryLimit/2 and the second one to show the rest:

ng-repeat="data in filtered = (list | filter:search) | 
startFrom:(currentPage-1)*entryLimit + entryLimit/2 | limitTo:entryLimit/2"

you need to change the startFrom filter, to start entryLimit / 2 items later:

startFrom:(currentPage-1)*entryLimit + entryLimit/2

You can test a working example here

Upvotes: 1

Related Questions