CODEWITHSUNDEEP
javascriptjqueryhtmlpagination
Nisha Basha
Nisha Basha

Reputation: 43

Pagination plugin with AJAX using Jquery

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.com/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.com ...');
        }
    },
    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;
  }
});

Upvotes: 1

Views: 15519

Answers (1)

ADyson
ADyson

Reputation: 61794

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.com/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.com ...');
      }
    },
    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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link href="https://cdnjs.cloudflare.com/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.

Upvotes: 2

Related Questions