【问题标题】:Reduce length of bootstrap pagination buttons减少引导分页按钮的长度
【发布时间】:2017-02-21 08:12:45
【问题描述】:

我在整个文档中使用引导程序,我也将它用于分页。

这个链接很棒: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> " : ""; 

用于将新字符串连接到 $links 变量(当然首先是 this 然后回显 $links)。

注意:我使用 explode() 是因为我得到了我的 URL,并且我修复了 &amp;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中发现问题: 它永远不会加载,但是当我在 document=ready 状态调用该函数时,它会加载。

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

我需要它始终工作,不仅是在文档“准备好”时,而是在每次点击“paginateblock”或每次更改页面时。

有人可以帮忙吗?

解决方案 #1: 感谢 S 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: [&lt;li&gt; 的 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 - 最终: 我对代码进行了更多修改,分页按钮位于&lt;div&gt; 内,并且内容对齐。 此外,始终显示第 1 页和 #lastpage。

代码:

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

【问题讨论】:

  • 您能否明确说明您想显示哪些链接?如果当前链接不是第一个怎么办?如果您不想显示所有链接,请不要遍历所有可能的页面。
  • 当我截取屏幕截图时,我在第 54 页(您会注意到它丢失了)。取而代之的是,我将其更改为当前,这很容易。剩下的我需要帮助。我不是在想一种方法来“不循环播放,一次只打印 7 页”,或者“循环播放所有但一次只显示 X 页”让我们说
  • 这不是 Bootstrap 问题,您需要修改您的 PHP 代码以仅输出您想要的页数。请包含生成页面数组的php代码。
  • 已完成,希望对您有所帮助!谢谢!

标签: php pagination


【解决方案1】:

我不确定代码的质量/性能,但您可以通过多种方式进行操作,这里有 2 种。 我实际上是在滚动而不是页码时开始使用延迟加载和自动加载页面,所以我没有代码。

1) JS/CSS:您可以为页码创建一个固定宽度的 div,并使用当前页码 * 每个 div 宽度滚动到当前页面。 假设您的当前页面为 54,每个页码占用 50 像素。您将左边距设置为 -2000px 的东西。

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

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

2) PHP:正如你所说,你有数组中的链接。您可以使用 array_splice 根据当前页码仅获取 10 个链接。所以如果它是 54。你可能会在 50-60 之间添加香料以显示 10。

  • 现在您需要 2 个按钮。一个移动页码 div,第二个移动到下一页(例如从第 3 个到第 4 个)。

更新: 找不到 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: 假设每个页码占用 50px。这应该有效。

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

【讨论】:

  • 这两种解决方案看起来都很棒!首先为伟大的想法点赞!让我试试,我会告诉你的
  • 好吧,#1 概念有效。现在我有 5 个按钮 [1][2][3][4][current] 但我可以看到这一行后面还有其他按钮。我会附上一张图片。必须是正确的 CSS 的东西,我会看看我是否可以自己做。当我在第 5 页(当前)时,栏不会“移动”。您将如何水平滚动,当我在第 5 页时,我可以在右侧看到更多按钮([6][7]?
  • 高度:35px;解决了。即使条很长,我也只看到 300px 的宽度和 35 的高度。我在想也许 jquery 代码没有加载..?
  • 36px * 不是 35px。我在看js
  • php 方法在我看来很难理解:/ 请问我们是否可以继续使用 jquery 方法?我几乎可以让它工作,它会发生变化。但是当页面加载新页码时,css -110px 会恢复,并且不会保持移动。
猜你喜欢
  • 2021-03-14
  • 1970-01-01
  • 2023-04-07
  • 2012-08-06
  • 2017-02-09
  • 1970-01-01
  • 1970-01-01
  • 2014-12-31
  • 1970-01-01
相关资源
最近更新 更多