jQuery TWBS 分页实现

Question

我是分页插件的新手，现在我决定使用 jQuery TWBS 分页插件。

我看到了不同的教程，但实际上我不知道如何将数据提取到这个插件并设置我想在每页显示的适当数量的 div。 我的 html 看起来像这样：

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <ul id="pagination-demo" class="pagination-sm"></ul>
      </div>
    </div>
    <div id="page-content" class="page-content">
         <div class="content">Some text</div>
         <div class="content">Some text</div>
         <div class="content">Some text</div>
         <div class="content">Some text</div>
         <div class="content">Some text</div>
    </div>
  </div>
</div>

而JS应该是这样的：

$('#pagination-demo').twbsPagination({
        totalPages: 2,
        next: 'Next',
        prev: 'Prev',
        onPageClick: function (event, page) {
            //fetch content and render here
            $('#page-content').text('Page ' + page) + ' content here';
        }
    });

我不明白如何将带有“内容”类名的 div 提取到这个 onPageClick 函数，并且每个页面只显示 4 个 div。

我知道这很容易，但我自己做不到。请帮忙。

Answer 1

In my case the code below worked, no problems

var $pagination = $('#pagination'),
totalRecords = 0,
records = [],
displayRecords = [],
recPerPage = 10,
page = 1,
totalPages = 0;
$.ajax({
url: "api/Estoque/Gets",
async: true,
dataType: 'json',
data: { startRec:0, search:'', pageSize:0},
success: function (data) {
records = data;
console.log(records);
totalRecords = 10
totalPages = 10
apply_pagination();
}
});
function apply_pagination() {
$pagination.twbsPagination({
totalPages: totalPages,
visiblePages: 6,
first: 'Pimeiro',
prev: 'Anterior',
next: 'Próximo',
last: 'Último',
loop: false,
onPageClick: null,
onPageClick: function (event, page) {

                        $.ajax({
                            url: "api/Estoque/Gets",
                            async: true,
                            dataType: 'json',
                            data: { startRec: page, search: '', pageSize: 10 },
                            success: function (data) {
                                records = data;
                                console.log(records);
                                totalRecords = data[0].totalRegistros;
                                totalPages = totalRecords;
                                apply_pagination();
                                gernerateCards();
                            }
                        });
                    }
                });
            }

            gernerateCards = function () {
                let builder = [];
                for (var i = 0; i < records.length; i++) {
                    builder.push('<div class="col-sm-6">');
                    builder.push('<div class="row">');
                    builder.push('<div class="col-sm-12">');
                    builder.push('<div class="card">');
                    builder.push('<div class="row">');
                    builder.push('<div class="col-sm-6">');
                    builder.push('<div class="card-body text-center">');
                    builder.push('<h5 class="card-title">Champoo</h5>');
                    builder.push('<p class="card-text">Resumo, prestar bem atenção nos dados, para maiores informações clique no botão <span class="text-info font-weight-bold"> detalhes</span> </p>');
                    builder.push('<span>');
                    builder.push('<a href="#" class="btn btn-outline-info">Detalhes</a>');
                    builder.push('</span>');
                    builder.push('</div>');
                    builder.push('</div>');
                    builder.push('<div class="col-sm-6">');
                    builder.push('<div class="card-header card-header-info">');
                    builder.push('<div class="ct-chart chart-item-material"><span class="text-dark"><i class="fa fa-long-arrow-up"></i> 55% </span> diferença do mês anterior.</div>');
                    builder.push('</div>');
                    builder.push('<br />');
                    builder.push('<p class="card-text">Quantidade  estoque: <span class="text-info font-weight-bold">1589</span></p>');
                    builder.push('</div>');
                    builder.push('</div>');
                    builder.push('</div>');
                    builder.push('</div>');
                    builder.push('</div>');
                    builder.push('</div>');
                }

                $('.card-estoque').empty();
                $('.card-estoque').append(builder.join(""));
                builder = [];
            }

Answer 2

根据Docs，

twbsPagination插件不支持itemOnPage

对于替代分页方法，他们建议使用flaviusmatis/simplePagination.js

希望这会有所帮助！