title: Reduce length of bootstrap pagination buttons
body: <p>I'm using bootstrap in the whole document, I'm using it for the pagination too.</p>
  
  <p>This link is awesome: <a href="https://stackoverflow.com/questions/2616697/php-mysql-pagination">PHP &amp; MySQL Pagination</a>
  and it helped me a lot coding the method for pagination (I am using postgre, I changed a few things).</p>
  
  <p>When I print each button for the pagination, I am using bootstrap's code:
  <a href="http://www.w3schools.com/bootstrap/bootstrap_pagination.asp" rel="nofollow noreferrer">http://www.w3schools.com/bootstrap/bootstrap_pagination.asp</a></p>
  
  <pre><code>&lt;ul class=\"pagination pagination-sm\"&gt;$links&lt;/ul&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>$links .= ($i != $page ) ? "&lt;li&gt;&lt;a href='$explode[0]$final$i'&gt;$i&lt;/a&gt;&lt;li&gt; " : ""; 
  </code></pre>
  
  <p>for concatenating new strings to the $links variable(of course first this then echoing $links).</p>
  
  <p>Note: I am using explode() because I get my URL and I fix the the <code>&amp;page=</code></p>
  
  <p><strong>My question is</strong>:</p>
  
  <p>How do I shorten the number of buttons to show per page?</p>
  
  <p>At the moment my situation is the one in the screenshot. 
  I'd love to get something like:</p>
  
  <pre><code>[current][2][3][4][5]...[61][62]
  </code></pre>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I changed the code to have the "current":</p>
  
  <pre><code>    if ($i != $page) { 
    $links.="&lt;li&gt;&lt;a href='$explode[0]$final$i'&gt;$i&lt;/a&gt;&lt;li&gt;";
    } else {
      $links.="&lt;li class=\"active\"&gt;&lt;a href='#'&gt;current&lt;/a&gt;&lt;li&gt;";
      }
  }
  </code></pre>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>added new image thanks to 1st solution (it is now black because I changed theme in the meantime).</p>
  
  <p><strong>EDIT</strong>: adding the php code.</p>
  
  <pre><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 &gt;= '$fdate' AND date &lt;= '$tdate' AND identification LIKE '%$identification%' ";
      $query = "SELECT *,'SENT' as direction FROM sent WHERE date &gt;= '$fdate' AND date &lt;= '$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 &lt;= $totalPages; $i++) {
      $explode = explode("&amp;page=", $absolute_url);
      $final="&amp;page=";
  
      if ($i != $page) {
        $links.="&lt;li&gt;&lt;a href='$explode[0]$final$i'&gt;$i&lt;/a&gt;&lt;li&gt;";
        } else {
          $links.="&lt;li class=\"active\"&gt;&lt;a href='#'&gt;current&lt;/a&gt;&lt;li&gt;";
          }
      }
  
  $query .= "order by date DESC OFFSET '$startAt' LIMIT '$perPage' ";
  $result = pg_query($conn, $query);
  </code></pre>
  
  <p><strong>EDIT:
  Found the problem in the jquery:</strong>
  it will not load, never, but when I call the function at the document=ready status, it will.</p>
  
  <pre><code>  &lt;script&gt;
      $(document).ready(function(){
      $('#paginateblock').css('margin-left','-110px');
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>I need this to work always, not only when the document is "ready", rather, at every click on 'paginateblock' or everytime I change page.</p>
  
  <p>Anybody can help?</p>
  
  <p><strong>SOLUTION #1:</strong>
  Thanks to the help of <strong>S Gandhe</strong> that provided me his code, I'm copying it here with my correction.</p>
  
  <pre><code>for ($i = 1; $i &lt;= $totalPages; $i++) {
      if($page &gt;= 7){
          $start = $page -4;
      } else {
          $start = $i;
      }
      $end = ($start + 7 &lt; $totalPages)?($start + 7):$totalPages;
      for ($start; $start &lt;= $end ; $start++) {
          $explode = explode("&amp;page=", $absolute_url);
          $final="&amp;page=";
          $css_class = ($page == $start ) ? "class='active'" : "";
          $links .= "&lt;li&gt;&lt;a href='$explode[0]$final$start'&gt;$start&lt;/a&gt;&lt;li&gt;";
      }
  }
  </code></pre>
  
  <p><strong>CSS:</strong> [the css for <code>&lt;li&gt;</code> did not change] </p>
  
  <pre><code>#page-selection{
      width:350px;
      height:36px;
      overflow:hidden;
  }
  </code></pre>
  
  <p><strong>HTML/PHP</strong></p>
  
  <pre><code>&lt;div id="page-selection"&gt;&lt;?php echo "&lt;ul class=\"pagination pagination-sm\"&gt;$links&lt;/ul&gt;"; ?&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>SOLUTION #2 - FINAL:</strong>
  I modified the code a bit more, the pagination buttons are inside a <code>&lt;div&gt;</code> and the content is aligned.
  Plus, Page #1 and #lastpage are always shown.</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>for ($i = 1; $i &lt;= $totalPages; $i++) {
    if($page &gt;= 4){
      $start = $page -3;
    } else {
      $start = $i;
    }
    $end = ($start + 6 &lt; $totalPages)?($start + 6):$totalPages;
    for ($start; $start &lt;= $end ; $start++) {
      $explode = explode("&amp;page=", $absolute_url);
      $final="&amp;page=";
      $css_class = ($page == $start ) ? "class='active'" : "";
      $links .= "&lt;li&gt;&lt;a href='$explode[0]$final$start'&gt;$start&lt;/a&gt;&lt;/li&gt;";
    }
    $firstpage = "&lt;li&gt;&lt;a href='$explode[0]$final'1&gt;&lt;&lt;&lt;/a&gt;&lt;/li&gt;";
    $lastpage = "&lt;li&gt;&lt;a href='$explode[0]$final$totalPages'&gt;&gt;&gt;&lt;/a&gt;&lt;/li&gt;";
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;div id="page-selector"&gt; 
      &lt;div class="page-selector-field"&gt;&lt;?php echo "&lt;ul class=\"pagination pagination-sm\"&gt;$firstpage&lt;/ul&gt;"; ?&gt;&lt;/div&gt;
      &lt;div id="page-selection" class="page-selector-field"&gt;&lt;?php echo "&lt;ul class=\"pagination pagination-sm\"&gt;$links&lt;/ul&gt;"; ?&gt;&lt;/div&gt;
      &lt;div class="page-selector-field"&gt;&lt;?php echo "&lt;ul class=\"pagination pagination-sm\"&gt;$lastpage&lt;/ul&gt;"; ?&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/qcS4T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qcS4T.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/CrPXa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CrPXa.png" alt="enter image description here"></a></p>