【发布时间】：2020-02-12 18:29:25
【问题描述】：
在上面的代码中，我成功地获得了带有表格分页的 o/p，但我没有得到它用于网格分页。每页应该只有 3 列和 1 行...我'我没有得到逻辑请帮助我......如何为引导网格进行分页？因此，我删除了表格标签和行，并尝试通过引导网格来完成，但我没有得到预期的 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 + '"> ' + pageNum + ' </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>【问题讨论】：
-
@Manoj> 你为什么在你的html中使用#而classs="t1"所以你需要将Hash(#)替换为Dot(.)就像$('.t1') 而且你在 row 类中缺少Dot(.)，所以它应该像 $('.t1 .row') 并将css('display', 'table-row')更改为css('display', 'flex')。所以你上面的 js 代码工作只需要我在这里已经提到的小改动..
标签： javascript jquery jquery-pagination