Question

我发现了另一个编码器（https://codepen.io/karpovsystems/pen/fFHxK）编写的动态分页脚本。我想在项目中使用此脚本。有谁知道如何将实际内容合并到该分页脚本中？我的内容项都包装在div标签中。但是，如果需要，我可以将内容包装器转换为li标签。我是jquery的新手，因此非常感谢您的帮助。我在下面放置了一些原始代码，仅用于可视化目的。但是，分页脚本是准确的。

我已经玩过代码了，但是它似乎不是一个简单的类插件，可以使脚本按需工作。

enter code here

<div class="single_item_box">
    <p>Stuff goes here</p>  
</div>
<div class="single_item_box">
    <p>Stuff goes here</p>  
</div>
<div class="single_item_box">
    <p>Stuff goes here</p>  
</div>
<div class="single_item_box">
    <p>Stuff goes here</p>  
</div>
<div class="single_item_box">
    <p>Stuff goes here</p>  
</div>
<div class="single_item_box">
    <p>Stuff goes here</p>  
</div>



/* * * * * * * * * * * * * * * * *
 * Pagination
 * javascript page navigation
 * * * * * * * * * * * * * * * * */

var Pagination = {

code: '',

// --------------------
// Utility
// --------------------

// converting initialize data
Extend: function(data) {
    data = data || {};
    Pagination.size = data.size || 300;
    Pagination.page = data.page || 1;
    Pagination.step = data.step || 3;
},

// add pages by number (from [s] to [f])
Add: function(s, f) {
    for (var i = s; i < f; i++) {
        Pagination.code += '<a>' + i + '</a>';
    }
},

// add last page with separator
Last: function() {
    Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
},

// add first page with separator
First: function() {
    Pagination.code += '<a>1</a><i>...</i>';
},



// --------------------
// Handlers
// --------------------

// change page
Click: function() {
    Pagination.page = +this.innerHTML;
    Pagination.Start();
},

// previous page
Prev: function() {
    Pagination.page--;
    if (Pagination.page < 1) {
        Pagination.page = 1;
    }
    Pagination.Start();
},

// next page
Next: function() {
    Pagination.page++;
    if (Pagination.page > Pagination.size) {
        Pagination.page = Pagination.size;
    }
    Pagination.Start();
},
// --------------------
// Script
// --------------------

// binding pages
Bind: function() {
    var a = Pagination.e.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
        if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
        a[i].addEventListener('click', Pagination.Click, false);
    }
},

// write pagination
Finish: function() {
    Pagination.e.innerHTML = Pagination.code;
    Pagination.code = '';
    Pagination.Bind();
},

// find pagination type
Start: function() {
    if (Pagination.size < Pagination.step * 2 + 6) {
        Pagination.Add(1, Pagination.size + 1);
    }
    else if (Pagination.page < Pagination.step * 2 + 1) {
        Pagination.Add(1, Pagination.step * 2 + 4);
        Pagination.Last();
    }
    else if (Pagination.page > Pagination.size - Pagination.step * 2) {
        Pagination.First();
        Pagination.Add(Pagination.size - Pagination.step * 2 - 2,         Pagination.size + 1);
    }
    else {
        Pagination.First();
        Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
        Pagination.Last();
    }
    Pagination.Finish();
},
// --------------------
// Initialization
// --------------------

// binding buttons
Buttons: function(e) {
    var nav = e.getElementsByTagName('a');
    nav[0].addEventListener('click', Pagination.Prev, false);
    nav[1].addEventListener('click', Pagination.Next, false);
},

// create skeleton
Create: function(e) {

    var html = [
        '<a>&#9668;</a>', // previous button
        '<span></span>',  // pagination container
        '<a>&#9658;</a>'  // next button
    ];

    e.innerHTML = html.join('');
    Pagination.e = e.getElementsByTagName('span')[0];
    Pagination.Buttons(e);
},
// init
Init: function(e, data) {
    Pagination.Extend(data);
    Pagination.Create(e);
    Pagination.Start();
}
};



/* * * * * * * * * * * * * * * * *
* Initialization
* * * * * * * * * * * * * * * * */

var init = function() {
Pagination.Init(document.getElementById('pagination'), {
    size: 30, // pages size
    page: 1,  // selected page
    step: 3   // pages before and after current
});
};

document.addEventListener('DOMContentLoaded', init, false);

我想获得此分页脚本来处理数百个动态添加到页面的项目。目前，我必须滚动数天才能到达div分隔项的底部。我已经将此脚本添加到了页面中，但是由于明显的原因，该内容无法通过分页脚本运行。

有谁知道如何将内容合并到此动态分页脚本中？

0 个答案: