时间戳

首页 > 解决方案 > 引导卡上的分页

javascript - 引导卡上的分页

问题描述

我在我的页面上使用引导卡，它们将与 MySQL 数据库中的 PHP 一起显示。我想添加分页，这样我可以一次显示 20 张卡片。我找到了 pagination.js 脚本，但我无法让它工作，也不明白为什么。

这是我目前使用纯 HTML 的卡片之一。例如，我有 30 个，我想一次只显示其中的 20 个。

                    <div class="card" id="motor-cards">
                        <img class="card-img-top" src="images/motor.jpg" alt="Card image cap">
                        <div class="card-body">
                            <div class="short-data">
                                <h5 class="card-title">Yamaha example</h5>
                                <h6 class="card-subtitle mb-2 text-muted">11987235 $</h6>
                                <div class="card-footer">
                                    <i class="fas fa-calendar-alt text-center" data-toggle="tooltip" title="example"><br>2001</i>
                                    <i class="fas fa-road text-center" data-toggle="tooltip" title="Kilométeróra állása"><br>15000km</i>
                                    <i class="fas fa-tachometer-alt text-center" data-toggle="tooltip" title="example"><br>100cm³</i>
                                    <i class="fas fa-id-card text-center" data-toggle="tooltip" title="example"><br>A2</i>
                                </div>
                            </div>
                            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Details</a>
                            <div class="card-footer-icons">
                                <i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Garagehelyezés"></i>
                                <i class="fas fa-share-alt fa-lg" data-toggle="tooltip" title="Share" style="padding-left: 5px;"></i>
                            </div>
                        </div>
                    </div>

这是分页的 html，我应该添加到我的代码中，但不明白在哪里。如果我把它放在我的“卡片”类之上，那么什么也不会发生。

<div id="data-container"></div>
<div id="pagination-container"></div>

和jQuery：

            $('#pagination-container').pagination({
                dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
                pageSize: 10,
                callback: function(data, pagination) {
                    // template method of yourself
                    var html = template(data);
                    $('#data-container').html(html);
                }
            })

标签： javascripthtmljquery

解决方案

要使分页起作用，您需要数据。在这里，您将 dataSource 指定为值为 1 - 16 的数组。如果您希望对卡片进行分页，则需要卡片的数据源：作为数组 - 在您的情况下，其中 30 个 - 我相信，以及模板函数必须接受数据并返回 html - 在您的情况下，是一张卡片的 HTML。

例如，假设您的数据源是这样的。

var data = [
  { 
    id: 'motor-cards',
    img: {
      src: 'images/motor.jpg',
      desc: 'Card image cap'
    }
    name: 'Yamaha example',
    usd: 123456.00,
    year: 2001,
    km: 15000,
    cm3_per_rev: 100
    size_class: 'A2'
  },
  ...
];

那么你会有一个像这样的模板函数

var template = function (vehicle) {
 return (
`<div class="card" id="${vehicle.id}">
    <img class="card-img-top" src="${vehicle.img.src}" alt="${vehicle.img.desc}">
    <div class="card-body">
        <div class="short-data">
            <h5 class="card-title">${vehicle.name}</h5>
            <h6 class="card-subtitle mb-2 text-muted">${vehicle.usd} $</h6>
            <div class="card-footer">
                <i class="fas fa-calendar-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.year}</i>
                <i class="fas fa-road text-center" data-toggle="tooltip" title="Kilométeróra állása"><br>${vehicle.km}km</i>
                <i class="fas fa-tachometer-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.cm3_per_rev}cm³</i>
                <i class="fas fa-id-card text-center" data-toggle="tooltip" title="example"><br>${vehicle.size_class}</i>
            </div>
        </div>
        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Details</a>
        <div class="card-footer-icons">
            <i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Garagehelyezés"></i>
            <i class="fas fa-share-alt fa-lg" data-toggle="tooltip" title="Share" style="padding-left: 5px;"></i>
        </div>
    </div>
</div>`
  );
}

所以你在 html 中不会有这 30 张卡片，而是只有容器。

完整的例如。

<div class="pagination-wrapper">
  <div id="cards-container">
    <!-- cards will be put here by pagination.js -->
  </div>
  <div id="pagination-container">
    <!-- the pagination controls will be put here by pagination.js -->
  </div>
</div>

<script>
var data = [
  { 
    id: 'motor-cards',
    img: {
      src: 'images/motor.jpg',
      desc: 'Card image cap'
    }
    name: 'Yamaha example',
    usd: 123456.00,
    year: 2001,
    km: 15000,
    cm3_per_rev: 100
    size_class: 'A2'
  },
  ... // 30 of similar objects for your cards
];

var template = function (vehicle) {
 return (
`<div class="card" id="${vehicle.id}">
    <img class="card-img-top" src="${vehicle.img.src}" alt="${vehicle.img.desc}">
    <div class="card-body">
        <div class="short-data">
            <h5 class="card-title">${vehicle.name}</h5>
            <h6 class="card-subtitle mb-2 text-muted">${vehicle.usd} $</h6>
            <div class="card-footer">
                <i class="fas fa-calendar-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.year}</i>
                <i class="fas fa-road text-center" data-toggle="tooltip" title="Kilométeróra állása"><br>${vehicle.km}km</i>
                <i class="fas fa-tachometer-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.cm3_per_rev}cm³</i>
                <i class="fas fa-id-card text-center" data-toggle="tooltip" title="example"><br>${vehicle.size_class}</i>
            </div>
        </div>
        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Details</a>
        <div class="card-footer-icons">
            <i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Garagehelyezés"></i>
            <i class="fas fa-share-alt fa-lg" data-toggle="tooltip" title="Share" style="padding-left: 5px;"></i>
        </div>
    </div>
</div>`
  );
}

var $cardsContainer = $('#cards-container');
$('#pagination-container').pagination({
  dataSource: data,
  pageSize: 20,
  callback: function(data, pagination) {
    $cardsContainer.html(template(data));
  }
})
</script>

注意：您可能需要根据您的用例在这里和那里进行调整。

推荐阅读