如何为 bootstrap 网格进行分页？

Question

在上面的代码中，我成功地获得了 o/p 和 table 分页，但我没有得到它的网格 pagination.Where 它应该只有 3 列并且每页 1 行...我不明白逻辑请帮助我...如何为 bootstrap 网格进行分页？因此，我删除了 table 标签和行，并尝试通过 bootstrap 网格来完成，但我没有得到预期 o/p

$(document).ready(function() {
  $('#t1').after('<div id="nav" class="text-center"></div>');
  var rowsShown = 3;
  var rowsTotal = $('#t1 row').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" class="btn-outline-info" rel="' + i + '">&emsp;' + pageNum + '&emsp;</a> ');
  }
  $('#t1 row').hide();
  $('#t1 row').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {
    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#t1 row').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div classs="t1">
  <div class="row">
    <div class="col-sm-12 col-lg-4">
      <div class="card" style="width: 18rem;">
        <div class="card" style="width: 18rem;">
          <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-lg-4">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-lg-4">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-lg-4">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-lg-4">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-lg-4">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我对您现有的 JS 代码进行了少量更改，因此它可以按照您的需要工作，因此您可以检查代码片段。

将 css('display', 'table-row') 更改为 css('display', 'flex').

在 $('#nav a').bind('click', function(e) 方法中添加了 e 并且此行还 e.preventDefault(); 以防止在 url.

中显示散列 (#) 注：Please check on FULL Page

$(document).ready(function() {
  $('.t1').after('<div id="nav" class="text-center"></div>');
  var rowsShown = 3;
  var rowsTotal = $('.t1 .row').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" class="btn-outline-info" rel="' + i + '">&emsp;' + pageNum + '&emsp;</a> ');
  }
  $('.t1 .row').hide();
  $('.t1 .row').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function(e) {
   e.preventDefault();
    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('.t1 .row').css('opacity', '0').hide().slice(startItem, endItem).
    css('display', 'flex').animate({
      opacity: 1
    }, 300);
  });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="container my-2 t1">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="card">
        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
  </div>
</div>

如何为 bootstrap 网格进行分页？

How to do pagination for bootstrap grid?

javascript

jquery

jquery-pagination