Create custom pagination

Hey guys am working on a quote website. And am new to JavaScript. I have returned some quotes.

My JavaScript

const status = [
  { status: "Do what is right not what is easy." },
  { status: "Hey there, WhatsApp is using me."},
  { status: "Too Busy" },
  { status: "Only you can give me that feeling." },
  { status: "I had a horribly busy day in converting oxygen into carbon dioxide" },
  { status: "Be yourself; everyone else is already taken" },
  { status: "Your attitude may hurt me, But main can Kill You!!"},
  { status: "Love is Blind, be careful." },
  { status: "'SUCCESS' is depend on U." },
  { status: "If you love someone set it free." },
  { status: "Love is sweet, When it's new. But it is sweeter when it's true." },
  { status: "Where there is love, there is life." },
  { status: "Not always 'Available' try your luck.." },
  { status: "I am not changed it's just I grew up and you should try too." },
  { status: "The biggest slap to your enemies is your success." },
  { status: "Born to express, not to impress."},
];

I have used the word "status" just for my sake. I wanted a custom pagination, so that a single page should contain only 5 quotes.

Although my friend gave me JavaScript but it's too difficult to understand (for me!!). So if any one can find any error, any extra code or any different JavaScript please help.

Friend's JavaScript

$(function() {
//(function(name) {
//  var container = $('#pagination-' + name);
//  var sources = function() {
//    var result = [];
//    for (var i = 1; i < 196; i++) {
//      result.push(i);
//    }
//    return result;
//  }();
//  console.log(sources)
//  var options = {
//    dataSource: sources,
//    callback: function(response, pagination) {
//      window.console && console.log(response, pagination);
//      var dataHtml = '<ul>';
//      $.each(response, function(index, item) {
//        dataHtml += '<li>' + item + '</li>';
//      });
//      dataHtml += '</ul>';
//      container.prev().html(dataHtml);
//    }
//  };
//  $.pagination(container, options);
//  container.addHook('beforeInit', function() {
//    window.console && console.log('beforeInit...');
//  });
//  container.pagination(options);
//  container.addHook('beforePageOnClick', function() {
//    window.console && console.log('beforePageOnClick...');
//    return false
//  });
//})('demo1');
  (function(name) {
    var container = $('#pagination-' + name);
    container.pagination({
      dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
      locator: 'items',
      totalNumber: 50,
      pageSize: 2,
      showPageNumbers: true,
      showPrevious: true,
      showNext: true,
      showNavigator: true,
      showFirstOnEllipsisShow: true,
      showLastOnEllipsisShow: true,
      ajax: {
        beforeSend: function() {
          container.prev().html('Loading data from flickr.com ...');
        }
      },
      callback: function(response, pagination) {
        window.console && console.log(22, response, pagination);
        var dataHtml = '<ul>';
        $.each(response, function(index, item) {
          dataHtml += '<li>' + item.title + '</li>';
        });
        dataHtml += '</ul>';
        container.prev().html(dataHtml);
      }
    })
  })('demo2');
})

Any one who are experts in JavaScript please can you make this javascript so dynamic that the each quote should create itself a <div><p></p></div> and paste in it.

My HTML

<div class="allStatus">
  <div class="latestatus">
    <p class="copytxt"></p>
  </div>
</div>

I needed the quotes to placed in:

<div class="latestatus"><p class="copytxt"></p></div>

And thanks for those who answer in advance.



Read more here: https://stackoverflow.com/questions/65720819/create-custom-pagination

Content Attribution

This content was originally published by Akash Kamath at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: