I'm doing pagination with ajax using pagination.js.

Everything is working fine except the "pageSize" property. I want to display 3 item per page but it is displaying all the data at once in the first page. How can I solve it?

I have attached my code here:

HTML

<div class="container">
  <div id="demo"></div>
  <div class="dataContainer"></div>
</div>

JS

$(document).ready(function () {
  $('#demo').pagination({
    dataSource: '.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
    locator: "items",
    totalNumber: 20,
    pageSize: 5,
    pageRange: 2,
    ajax: {
        beforeSend: function () {
            $(".dataContainer").html('Loading data from flickr ...');
        }
    },
    callback: function (data, pagination) {
        var html = simpleTemplating(data);
        $(".dataContainer").html(html);
    }
  });

  function simpleTemplating(data) {
    var html;
    $.each(data, function (index, item) {
        html = "running" + index;
    });
    return html;
  }
});

I'm doing pagination with ajax using pagination.js.

Everything is working fine except the "pageSize" property. I want to display 3 item per page but it is displaying all the data at once in the first page. How can I solve it?

I have attached my code here:

HTML

<div class="container">
  <div id="demo"></div>
  <div class="dataContainer"></div>
</div>

JS

$(document).ready(function () {
  $('#demo').pagination({
    dataSource: 'https://api.flickr./services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
    locator: "items",
    totalNumber: 20,
    pageSize: 5,
    pageRange: 2,
    ajax: {
        beforeSend: function () {
            $(".dataContainer").html('Loading data from flickr. ...');
        }
    },
    callback: function (data, pagination) {
        var html = simpleTemplating(data);
        $(".dataContainer").html(html);
    }
  });

  function simpleTemplating(data) {
    var html;
    $.each(data, function (index, item) {
        html = "running" + index;
    });
    return html;
  }
});

• javascript
• jquery
• html
• pagination

• What is .pagination(? It's not a built-in jQuery function. If you're using a plugin please specify its name and ideally also provide us with a link to its website and documentation. Otherwise it's hard for us to know what the function is actually supposed to do, or whether you have configured it correctly. You can't assume that we are all familiar with the specific thing you are using. – ADyson Commented Oct 9, 2019 at 12:17
• P.S. if you want to display 3 items per page then why did you set the page size to 5? – ADyson Commented Oct 9, 2019 at 12:18
• okay.. I referred pagination.js website. sorry that's my mistake I want to display 3 item only but any way if I give pageSize whatever its displaying all data in every page.Actually the problem is passing all data in callback property so i think there is some mistake so how to make based on page size. – Nisha Basha Commented Oct 10, 2019 at 4:36
• thanks. So...you said "here displaying all the data in 1st page itself", but your code doesn't actually do that. It only displays one item (the last one) because in ` $.each(data, function (index, item) { html = "running" + index; });` you overwrite html each time. To get the behaviour you've described would require you to write html += "running" + index; instead. Please ensure any code you post here actually reproduces the issue you're talking about! – ADyson Commented Oct 10, 2019 at 9:10
• Clearly, doing that just inserts everything received, ignoring the pageSize instruction. It's not clear how, or if, the pageSize can actually be applied in this situation, except by you manually selecting the correct records to include in each page. But since the callback doesn't tell you the currently selected page number, I don't see how you can do that. – ADyson Commented Oct 10, 2019 at 9:16

1 Answer 1

Since this flickr API endpoint will always return exactly 20 items of its choosing and does not recognise any parameters instructing it to page the results, the assumptions behind pagination.js's logic do not work. The plugin appears to assume the data is returned already paged.

Therefore you need to implement pagination logic yourself inside the "callback" function. You can do this fairly easily using the pageNumber and pageSize variables supplied to the callback, and by slicing the results array appropriately. Here's a demo:

$(function() {
  var container = $('#demo');
  container.pagination({
    dataSource: 'https://api.flickr./services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
    locator: 'items',
    totalNumber: 20,
    pageSize: 3,
    ajax: {
      beforeSend: function() {
        container.prev().html('Loading data from flickr. ...');
      }
    },
    callback: function(response, pagination) {
      var dataHtml = '<ul>';
      var pageStart = (pagination.pageNumber - 1) * pagination.pageSize;
      var pageEnd = pageStart + pagination.pageSize;
      var pageItems = response.slice(pageStart, pageEnd);
      $.each(pageItems, function(index, item) {
        dataHtml += '<li>' + item.title + '</li>';
      });

      dataHtml += '</ul>';

      container.prev().html(dataHtml);
    }
  })
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/paginationjs/2.1.4/pagination.css" rel="stylesheet" />
<div id="wrapper">
  <section>
    <div class="data-container"></div>
    <div id="demo"></div>
  </section>
</div>

N.B. This is a bit inefficient because it actually fetches all the data again from the API each time you move to a new page. You might be better to make your own AJAX request to the endpoint, get the returned data and pass it to the pagination plugin as a static array. Then you wouldn't need your own paging logic and you'd reduce the number of AJAX calls to one.