Question

I’m trying to configure a jQuery pagination for my website. I’ve configured a pagination which is based on counting the <p> tags. But requirement is to be custom paginated. Like using some <!--pagebreak--> tags or something like that. How can I do the custom pagination using jQuery and custom <!--pagebreak--> tag. Please suggest any pagination script using jQuery and custom <!--pagebreak--> tag

<div class="storybody">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <!--pagebreak-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <!--pagebreak-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
</div>

Answer 1

I have done some thing on my own.You can check the code in Jsfiddle. I have used Jquery1.3.2. and jquery.pajinate.js.

HTML:

<div id="paging_container8" class="container">
                
                <div class="page_navigation"></div>
                <div class="storybody">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <!--pagebreak-->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <!--pagebreak-->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    </div>
                
                
            </div> ​

JavaScript

<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
  {
    if(x==0){
        txt=txt+substr[x];
    }
    else{
          txt=txt+"</li><li>"+substr[x];
    }
  }
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);

$(document).ready(function(){
                $('#paging_container8').pajinate({
                    num_page_links_to_display : 2,
                    items_per_page : 1 ,
                    item_container_id : '.storycontent'
                });
            });
​</script>