CODEWITHSUNDEEP
jqueryhtmlpagination
rklitz
rklitz

Reputation: 162

Creating a pagination

I have a huge amount of div's all being displayed on this one page (roughly 25 right now) and every day more and more are getting added. I was wondering if there is an easy to use jQuery library to utilize pagination or if there is a very simple script that I can write to go about breaking these up without manually making all the extra pages. Here's my HTML (very basic and simple). Maybe even using an Ajax method? I'm not very familiar with writing Ajax though, which is why I've come here

<section class="stories">
  <h2>The Stories</h2>

  <div class="story">
      <h4>Title</h4>
      <p>Story info</p>
  </div>

  <div class="story">
      <h4>Title</h4>
      <p>Story info</p>
  </div>

  <div class="story">
      <h4>Title</h4>
      <p>Story info</p>
  </div>

</section>

Upvotes: 0

Views: 84

Answers (3)

DrRoach
DrRoach

Reputation: 1356

Very rough version, but I don't have much time and the core workings are there, one or two ajustments such as range validation need to be added but it should work nethertheless.

var start = 0;
var ending = 5;
var jump = 5;
var count = 0;
var stories = $('.story');
function paginate() {
    stories.show();
    $.each(stories, function() {
        if(count > ending && count < start) {
            $(this).hide();
        }
        count++;
    });
}

$('#next').on('click', function() {
    start += jump;
    ending += jump;
    paginate();
});

$('#prev').on('click', function() {
    start -= jump;
    ending -= jump;
    paginate();
});

paginate();

Upvotes: 1

vaso123
vaso123

Reputation: 12391

I think it is not a big work to write one for yourself. I've never met a library or plugin like this, but take a shot: http://www.sitepoint.com/10-jquery-pagination-plugins/

What i think, this can be done like this:

Need the number of items to show. Need the number of items. Need how many page do you have. Need the current page.

Store the number of items what you want to show into a variable. Count, how many items do you have. Check the url, is there a paramter like pageNum or anything, what tells you, what is the current page. With the division of maxpage / itemsonpage rounded up will gives you, how many page do you have. With the current page and itemsonpate you can calculate the start point.

And you can use hases to store, what is the current page.

Upvotes: 0

charles
charles

Reputation: 547

It sounds like you're using tabular data, in which case a table might be the best approach. Since you're not extremely familiar with the process anyhow, there's absolutely zero reasons to not use a library.

I'd highly recommend DataTables.js.

Upvotes: 1

Related Questions