減少引導程序分頁按鈕的長度

Question

我在整個文檔中使用引導程序，我也將它用於分頁。

這個鏈接真棒：PHP & MySQL Pagination 它幫助我編寫了很多分頁方法（我使用postgre，我改變了一些東西）。

當我打印的分頁每個按鈕，我使用的引導代碼： http://www.w3schools.com/bootstrap/bootstrap_pagination.asp

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

和：

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

爲串聯新的字符串到$第一個鏈接變量（當然然後回顯$鏈接）。

注：我使用爆炸（），因爲我得到我的地址，我解決了&page=

我的問題是：

如何縮短按鍵的數量每頁顯示的？

目前我的情況是截圖中的情況。 我很想得到這樣的：

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

編輯：

我改變了代碼，具有 「當前」：

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

編輯：

第一個解決方案增加了新的圖像（它現在是黑色的，因爲我改變了主題與此同時）。

編輯：添加php代碼。

$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); 

編輯： 發現在jQuery的問題： 它不會加載，從來沒有，但是當我調用該函數在文檔=就緒狀態，它會的。

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

我需要這總是工作，不僅在文檔是「準備」，而在對「paginateblock」或每次我換頁每一次點擊。

有人可以幫忙嗎？

解決方案＃1： 由於小號Gandhe的幫助，爲我提供了他的代碼，我在這裏與我校複製它。

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： [爲<li>的CSS並沒有改變]

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

HTML/PHP

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

解決方案2 - 決賽： 我修改代碼多一點，頁碼按鈕位於<div>之內，並且內容已對齊。 另外，頁面＃1和#lastpage始終顯示。

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

我不確定代碼的質量/性能，但您可以通過多種方式來完成，其中2個在這裏。 我實際上開始使用惰性加載和自動加載頁面時滾動頁碼，所以我沒有代碼。

1）JS/CSS：您可以爲頁碼創建一個固定寬度div，並使用當前頁碼*每個div寬度滾動到當前頁面。假設你的當前頁面是54，每個頁面的數量是50px。你會將餘量設置爲-2000px。

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

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

2）PHP：如你所說，你必須在陣列中的鏈接。您可以使用array_splice根據當前頁碼獲取10個鏈接。所以如果它是54.你可能會從50-60香料它顯示10.

• 現在你將需要2個按鈕。一個移動頁碼div，第二個移動到下一個頁面（像第三個從第三個）。

更新： 找不到js代碼，但在這裏是一個基於PHP的解決方案的一些代碼。 一個小優點是你不會打印頁面上的所有100個項目，而只是打印5個鏈接。

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] 

更新2： 假設每一頁號正在50像素。這應該工作。

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



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

這是使用您的變量的PHP代碼。你需要用下面的代碼替換你的for循環。更喜歡PHP代碼，因爲在上面的JS中你仍然需要很多考慮。我希望我能找到我有的JS代碼。傷心。

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>"; 
    }