Question

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

我看到了不同的教程，但实际上我无法找到如何将数据提取到此插件并设置每页我想显示的相应数量的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';
        }
    });

我无法理解如何使用＆＃34;内容＆＃34;来获取我的div。这个onPageClick函数的类名，每页只显示4个div。

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

Answer 1

根据Docs，

twbsPagination插件不支持itemOnPage

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

希望这有帮助！

Answer 2

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 = [];
            }

jQuery TWBS分页实现

2 个答案: