2016-10-12 46 views
0

我在整个文档中使用引导程序,我也将它用于分页。减少引导程序分页按钮的长度

这个链接真棒: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; 
} 

enter image description here enter image description here

+0

您能澄清一下您想要显示的链接吗?如果当前链接不是第一个呢?如果您不想显示所有链接,请不要遍历所有可能的页面。 –

+0

当我截图时,我在第54页(你会注意到它缺失)。取而代之的是,我会将其改为现在,这很容易。其余的我需要帮助。我没有想到一种方法来“不循环所有,一次只打印7页”,或“循环所有,但一次只显示X页”假设 – Nihvel

+1

这不是引导程序问题,您需要修改你的PHP代码只输出你想要的页数。请包括用页面生成数组的php代码。 – mauriblint

回答

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] 

enter image description here

更新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>"; 
    } 
+0

这两个解决方案似乎都很棒!首先为伟大的想法upvote!让我试试,我会告诉你 – Nihvel

+0

好吧,#1的概念起作用。现在我有5个按钮[1] [2] [3] [4] [当前],但我可以看到这一行后面还有其他按钮。我会附上一张照片。一些CSS必须是正确的,我会看看我是否可以自己做。 当我在第5页(当前)时,栏不会“移动”。你将如何水平滚动,当我在第5页时,我可以看到右侧更多的按钮([6] [7]? – Nihvel

+0

height:35px;解决了。即使酒吧很长,我只能看到300px我认为可能jquery代码没有加载.. – Nihvel