How to handle hundreds of pagination in AngularJS + Laravel4? - php

Question

I have a case where I have to pull data from the server and make pagination in the results. There are thousands of the data, and I'm planning to show 20 items per page.
My plan is to call this Laravel function each time new page is clicked:
public static function GetPagingListing($limLow=null, $limTop=null) {
$data = array();
$results = DB::table('news')->orderBy('date','desc')->limit($limLow, $limTop)->get(array('id','title','category','edituser','date'));
if($results != null) {
$i = 0;
foreach($results as $k=>$v) {
$data[$i][] = $v;
$i++;
}
}
$count = DB::table('news')->count(); //this gives total count of the data, for pagination later
return Response::json(['data'=>$data, 'count'=> ($count/20)]);
}
Then my current way of displaying the pagination is this (.html in Angular):
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()"><i class="fa fa-angle-double-left"></i> Before</a>
</li>
<li ng-repeat="n in range(itemCount)" ng-class="{active: n == currentPage}" ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == newsList.length - 1}">
<a href ng-click="nextPage()">After <i class="fa fa-angle-double-right"></i></a>
</li>
</ul>
This all works fine, but the total of my data count is 1000+, that's like 50+ pagination that user can click. How to make the pagination like [<prev][1][2][3][...][21][22][23][...][50][51][52][next>] (or at least a logic)?
EDIT
Solved my problem using Angular UI Bootstrap:
<pagination total-items="itemCount" page="currentPage" on-select-page="setPage(page)" boundary-links="true" rotate="false" max-size="5"></pagination>
with its cdn:
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.7.0/ui-bootstrap-tpls.min.js"></script>

Answer 1

I've just think about this recently, and my conclusion is that the logic of the pagination is surprisingly involved. One place you can look for inspiration is Wordpress's paginate_links function http://core.trac.wordpress.org/browser/tags/3.7.1/src/wp-includes/general-template.php#L1988.
You need to know the total number of pages total, the current page current, number of first/last pages to be displayed end_size (3 in your example) and the number of pages around the current page mid_size (1 in your example); then:
if total < 2, no pagination needed
if current > 1, shows prev
for n from 1 to total:
if n <= end_size (the first part) or n > total - end_size (the last part) or (n >= current - mid_size and n <= current + mid_size) (the middle part), display link to page n
else display dots if not displayed
if current < total, shows next