3

I have html code that have some <div class="post"> inside. I want to paginate them with javascript. How can I do that? (I know I can do it by PHP but I just want to do it with JS)

the html generated by my php looks like that:

    <body>
<div id="content">
<div class="post">
post content
</div>
<div class="post">
</div>
...

</div>

</body>

Maybe it will be the best to use jquery for that? (I'm using jquery ajax to load html into content allready)

pixelbobby
  • 4,368
  • 5
  • 29
  • 49
Adrian Modliszewski
  • 1,114
  • 2
  • 18
  • 31
  • 2
    Do you mean hiding some of the posts? If you paginate in JS either you will have all the posts loaded or you need AJAX and call the PHP that does the pagination server side – Miquel May 19 '11 at 15:12
  • The point is that I want to have all post loaded, and only paginate them in javascript – Adrian Modliszewski May 19 '11 at 15:18
  • 2
    Then you could use something like the acordeon or tabs plugins in JQuery using a tab for a "page" of posts for example. http://flowplayer.org/tools/demos/tabs/accordion.html – Miquel May 19 '11 at 15:20

5 Answers5

1

I would first get the count of items. For example, if you have 10, loop through and create <div>s for each. [1][2][3]... Then, when you click on a pager <div>, get the value and request that specific item such as $("#ct").load("/posts?id=5");

pixelbobby
  • 4,368
  • 5
  • 29
  • 49
1

yea there is a jquery plugin that works nicely https://github.com/gbirke/jquery_pagination

Mertis
  • 288
  • 1
  • 10
  • can you give an example of how to use this plugin _here_? – jcolebrand May 19 '11 at 15:15
  • well that link provides a pretty good example of how to use it. you just have to set up the call back with the page number, and the data you want paginated in an array – Mertis May 19 '11 at 15:25
  • 3
    ~ This site is not StackExchangeOfLinks.com, this is StackOverflow, where we actually try to help people. What happens in three years when that website doesn't exist and your answer does? It doesn't help people _at all_. – jcolebrand May 19 '11 at 15:28
  • It's a shame that You didn't explain how to use it. But that's what I use for my problem, so I give a point and chose the "best" option anyway. – Adrian Modliszewski May 29 '11 at 18:49
0

Good jQuery pagination plugin to use with JSON data

Community
  • 1
  • 1
Vishwanath
  • 6,284
  • 4
  • 38
  • 57
  • can you give an example of how to use this plugin _here_? – jcolebrand May 19 '11 at 15:14
  • ~ This site is not StackExchangeOfLinks.com, this is StackOverflow, where we actually try to help people. What happens in three years when that website doesn't exist and your answer does? It doesn't help people _at all_. – jcolebrand May 19 '11 at 15:27
  • The place where question asked and the site referred is same, duplicate question is what this is, not to mention how many times.... – Vishwanath May 19 '11 at 15:30
  • Then don't answer the question. Either take the time to answer it well, or not at all. – jcolebrand May 19 '11 at 15:31
0

Yes, using jQuery to simulate pagination is a valid task. You could easily use the jQuery(selector).hide().slice(start,end).show() pattern to do what you want. Then you have to manage the start and end in your code, but that should be easy enough.

jcolebrand
  • 15,889
  • 12
  • 75
  • 121
0

You can use Pagino. It's very easy and simple https://github.com/pagino/pagino-js

Behnam
  • 6,244
  • 1
  • 39
  • 36