Question

我在整个文档中使用bootstrap，我也将它用于分页。

此链接非常棒：PHP & MySQL Pagination 并且它帮助我编写了很多编码方法（我正在使用postgre，我改变了一些东西）。

当我打印每个按钮进行分页时，我使用的是bootstrap的代码： 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变量（当然首先是回调$ links）。

注意：我使用的是explode（），因为我收到了我的网址并修复了&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： [<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.你可能会因为显示10而从50-60开始。

现在你需要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>";
    }

减少bootstrap分页按钮

1 个答案: