Javascript 如何进行自定义分页

我正在尝试为我的网站配置jQuery分页。我已经配置了一个基于计数标记的分页。但要求是定制分页的。比如使用一些标签之类的东西。如何使用jQuery和自定义标记进行自定义分页。请建议使用jQuery和自定义标记的任何分页脚本

举个例子：

注释标记为nodeType==8，因此根据您的输入，您可以通过以下方式读取：

var el = []; //[2,3,1]

var sum = 0;

$(".storybody").contents().filter(function(){
    if($(this).is("p")) sum++; //how many p before a comment
    if(this.nodeType === 8){
        el.push(sum);
        sum = 0;
    }
});

例如，基于el阵列，这可能是下一个和上一个函数，但可以用更好的方式来实现，但这只是一个例子-

//Next and Prev function
var curr = 0;
var k = 0;

$("#next").on("click", function(){
    if(curr < el.length){
        $(".storybody p").hide();
        var e = range(k, el[curr], ".storybody p", "next");
        $(e).each(function(){$(this).show()});                
        k += el[curr];                    
        curr++;
    }else{
        console.log("last page!");         
    }                  
});

$("#prev").on("click", function(){
    if(curr > 0){
        $(".storybody p").hide();
        var e = range(k, el[curr-1], ".storybody p", "prev");
        $(e).each(function(){$(this).show()});
        k -= el[curr-1];                    
        curr--;
    }else{
        console.log("first page!");         
    }
});


function range(s,e,sel,ac){

    if(ac == "next"){
        var elms = [];
        for(var i = s; i < (e+s); i++){
            elms.push($(sel).eq(i));
        }
    }else if(ac == "prev"){
        var elms = [];
        for(var i = (s-e); i < s; i++){
            elms.push($(sel).eq(i));
        }
    }
    return elms;
}

---

PS：假设在我自己做了一些事情之前，我已经在p标记的末尾添加了另一个标记。您可以检入代码。我使用了Jquery1.3.2。和

HTML:

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>

---

很酷的故事，问题是什么？你能告诉我们问题是什么吗？你想要什么是具体的…你可以配置你的分页以使用你的HTML注释作为分页符。我认为fock需要一些jquery分页脚本。。你可以在这里试试。。是的，我想要一个用于定制分页的jquery解决方案。使用自定义分页标记。

<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> ​

<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>