有没有一种方法可以使用Javascript显示每页的条目?

时间:2019-01-13 09:23:38

标签: javascript php

让我们说我建立了一个文件,其中将显示来自DB的所有条目。

为了避免进行服务器端分页,我想在找到特定数量的条目之后创建诸如隐藏/显示旧/新页面之类的东西。

这主要是因为我发现自己确实在服务器端的分页中挣扎,而我通常可以这样做,但是这次是不可能的,因为我要从两个数据库表中获取数据。

这是我使用Javascript完成的代码(我正在使用库);这是我的html:

<div class="page" id="page1">
   <?php foreach($data as $d) :  ?>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
   <?php endforeach; ?>
</div>
<ul id="pagination-demo" class="pagination"></ul>

这是javascript:

$('#pagination-demo').twbsPagination({
  totalPages: <?= $i++ ?>,
  // the current page that show on start
  startPage: 1,

  // maximum visible pages
  visiblePages: 5,

  initiateStartPageClick: true,

  // template for pagination links
  href: false,

  // variable name in href template for page number
  hrefVariable: '{{number}}',

  // Text labels
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',

  // carousel-style pagination
  loop: false,

  // callback function
  onPageClick: function (event, page) {
    $('.page-active').removeClass('page-active');
    $('#page'+page).addClass('page-active');
  },

  // pagination Classes
  paginationClass: 'pagination',
  nextClass: 'next',
  prevClass: 'prev',
  lastClass: 'last',
  firstClass: 'first',
  pageClass: 'page',
  activeClass: 'active',
  disabledClass: 'disabled'

});

因此,假设我当前在数据库中有20个条目,如何使每页仅显示12个成为可能?

实际行为是每页仅显示20个条目。

感谢阅读?

1 个答案:

答案 0 :(得分:-1)

在SQL查询中使用偏移量和限制

<?  
    $limit = $_GET['limit'];
    $offset = $_GET['offset'];
    $bdd = new PDO(LOGIN DATA);
    $req = $bdd->prepare("SELECT * FROM table LIMIT ? OFFSET ?");
    $req->execute(array($limit, $offset));
?>

然后在页面中使用此循环

<?php 
  while($line = $req->fetch()){
?>
your html code
<?php
}
?>