Reduce length of bootstrap pagination buttons

Question

I'm using bootstrap in the whole document, I'm using it for the pagination too.

This link is awesome: PHP & MySQL Pagination and it helped me a lot coding the method for pagination (I am using postgre, I changed a few things).

When I print each button for the pagination, I am using bootstrap's code: http://www.w3schools.com/bootstrap/bootstrap_pagination.asp

<ul class=\"pagination pagination-sm\">$links</ul>

and:

$links .= ($i != $page ) ? "<li><a href='$explode[0]$final$i'>$i</a><li> " : ""; 

for concatenating new strings to the $links variable(of course first this then echoing $links).

Note: I am using explode() because I get my URL and I fix the the &page=

My question is:

How do I shorten the number of buttons to show per page?

At the moment my situation is the one in the screenshot. I'd love to get something like:

[current][2][3][4][5]...[61][62]

EDIT:

I changed the code to have the "current":

    if ($i != $page) { 
  $links.="<li><a href='$explode[0]$final$i'>$i</a><li>";
  } else {
    $links.="<li class=\"active\"><a href='#'>current</a><li>";
    }
}

EDIT:

added new image thanks to 1st solution (it is now black because I changed theme in the meantime).

EDIT: adding the php code.

$perPage = addslashes(strip_tags(@$_GET["perPage"]));
$page = addslashes(strip_tags(@$_GET['page'])) ?: '1';
$startAt = $perPage * ($page - 1);

SWITCH ($direction){
case "SENT":
    $count = "SELECT count(*) as total, 'SENT' as direction FROM sent WHERE date >= '$fdate' AND date <= '$tdate' AND identification LIKE '%$identification%' ";
    $query = "SELECT *,'SENT' as direction FROM sent WHERE date >= '$fdate' AND date <= '$tdate' AND identification LIKE '%$identification%' "; 
break;
}

$res = pg_fetch_assoc(pg_query($conn, $count));
$total = ceil($res['total'] / $perPage);
if (empty($total1)) { $total1 = '0'; } else { $total1 = ceil($res['total1'] / $perPage); }
$totalPages = $total + $total1;

$links = "";
$absolute_url = full_url( $_SERVER );

for ($i = 1; $i <= $totalPages; $i++) {
    $explode = explode("&page=", $absolute_url);
    $final="&page=";

    if ($i != $page) {
      $links.="<li><a href='$explode[0]$final$i'>$i</a><li>";
      } else {
        $links.="<li class=\"active\"><a href='#'>current</a><li>";
        }
    }

$query .= "order by date DESC OFFSET '$startAt' LIMIT '$perPage' ";
$result = pg_query($conn, $query);

EDIT: Found the problem in the jquery: it will not load, never, but when I call the function at the document=ready status, it will.

  <script>
    $(document).ready(function(){
    $('#paginateblock').css('margin-left','-110px');
    });
  </script>

I need this to work always, not only when the document is "ready", rather, at every click on 'paginateblock' or everytime I change page.

Anybody can help?

SOLUTION #1: Thanks to the help of S Gandhe that provided me his code, I'm copying it here with my correction.

for ($i = 1; $i <= $totalPages; $i++) {
    if($page >= 7){
        $start = $page -4;
    } else {
        $start = $i;
    }
    $end = ($start + 7 < $totalPages)?($start + 7):$totalPages;
    for ($start; $start <= $end ; $start++) {
        $explode = explode("&page=", $absolute_url);
        $final="&page=";
        $css_class = ($page == $start ) ? "class='active'" : "";
        $links .= "<li><a href='$explode[0]$final$start'>$start</a><li>";
    }
}

CSS: [the css for <li> did not change]

#page-selection{
    width:350px;
    height:36px;
    overflow:hidden;
}

HTML/PHP

<div id="page-selection"><?php echo "<ul class=\"pagination pagination-sm\">$links</ul>"; ?></div>

SOLUTION #2 - FINAL: I modified the code a bit more, the pagination buttons are inside a <div> and the content is aligned. Plus, Page #1 and #lastpage are always shown.

CODE:

for ($i = 1; $i <= $totalPages; $i++) {
  if($page >= 4){
    $start = $page -3;
  } else {
    $start = $i;
  }
  $end = ($start + 6 < $totalPages)?($start + 6):$totalPages;
  for ($start; $start <= $end ; $start++) {
    $explode = explode("&page=", $absolute_url);
    $final="&page=";
    $css_class = ($page == $start ) ? "class='active'" : "";
    $links .= "<li><a href='$explode[0]$final$start'>$start</a></li>";
  }
  $firstpage = "<li><a href='$explode[0]$final'1><<</a></li>";
  $lastpage = "<li><a href='$explode[0]$final$totalPages'>>></a></li>";
}

HTML:

  <div id="page-selector"> 
    <div class="page-selector-field"><?php echo "<ul class=\"pagination pagination-sm\">$firstpage</ul>"; ?></div>
    <div id="page-selection" class="page-selector-field"><?php echo "<ul class=\"pagination pagination-sm\">$links</ul>"; ?></div>
    <div class="page-selector-field"><?php echo "<ul class=\"pagination pagination-sm\">$lastpage</ul>"; ?></div>
  </div>

CSS:

#page-selection{
    width:344px;
    height:36px;
    overflow:hidden;
}

#page-selector{
    width: 450px;
    height:36px;
    overflow:hidden;
    /*margin: 0 auto; uncomment this if you want this bar centered */
}

.page-selector-field{
    width:50px;
    height:36px;
    overflow:hidden;
    float: left;
}

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {
    display: inline;
    width: 50px;
    }

ul.pagination li a {
    display: block;
    width: 50px;
    text-align:center;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

Answer 1

am not sure about the quality/performance of code, but you can do it multiple ways, 2 of them here. I actually started using lazy load and auto loading of pages when scroll rather page numbers, so I don't have the code.

1) JS/CSS:You can create a fix width div for page numbers and scroll to current page using current page number * each div width. let's say your current page is 54 and each page number is taking 50px. you will set the margin left to -2000px something.

$('#paginateblock').css('margin-left','-110px');

https://jsfiddle.net/66wy0t19/3/

2) PHP : as you said you have the links in array. you can use array_splice to get just the 10 links based on current page number. so if it's 54. you will may be spice it from 50-60 for showing 10.

• now you will need 2 buttons. one to move the page numbers div and second to get to Next page (like 4th from 3rd).

Update: Couldn't find the js code, but here is some code based on php solution. one minor advantage is you won't print all 100 items on page rather just print 5 links.

echo "<ul class='pagination wrap'>";
if ($this->pageNumber - 1) {
echo "<li ><a href='{$this->url}/page_" . ($this->pageNumber - 1) . "/'  {$ajax_request}><<</a></li>";
}
$start =($this->pageNumber > 5)?$this->pageNumber -4:1;
$end = ($i + 5 < $this->total_pages)?($start+5):$this->total_pages;
for ($start; $start <= $end ; $start++) {
    echo "<li {$css_class}><a href='{$this->url}/page_{$i}/'  {$ajax_request}  >{$i}</a></li>";
}
if ($this->total_pages - $this->pageNumber > 1) {
echo "<li ><a href='{$this->url}/page_" . ($this->pageNumber + 1) . "/'  {$ajax_request}>>></a></li>";
}

echo "</ul>";[![the output looks like this. ofcourse with classes. but i use bootstrap too.][1]][1]

Update 2: Assuming each page number is taking 50px. this should work.

var currentPage =27;
var paginateBlockMargin = (Math.ceil(currentPage/2) * 100)-100;
$('#paginateblock').css('margin-left', '-'+paginateBlockMargin+'px');



 Check t  https://jsfiddle.net/66wy0t19/14/     

This is the PHP code using your variables. You would need to replace your for loop with following. Prefer PHP code, as you will still need a lot of consideration in above JS. I wish I could find that JS code I had. sad.

if($page > 5){
       $start =  $page -4;
    }
    $end = ($start + 5 < $totalPages)?($start + 5):$totalPages;
    for ($start; $start <= $end ; $start++) {
        $explode = explode("&page=", $absolute_url);
        $final="&page=";
        $css_class = ($page == $start ) ? "class='active'" : "";
        $links .= "<li><a href='$explode[0]$final$start'>$start</a><li>";
    }