使用javascript的简单分页答案

【问题标题】：Simple pagination using javascript使用javascript的简单分页
【发布时间】：2013-07-05 13:43:13
【问题描述】：

我正在尝试使用 Javascript 创建一个简单的分页（是的，我知道 jquery 插件，但我真的很想弄清楚如何从头开始做到这一点）。无论如何，我非常接近完成分页，但我无法弄清楚如何使后退按钮起作用。另外，我怎样才能添加页码，以便我可以有类似的东西： Next ... 1 2 .. 9 10 ... Last？目前我只有下一个和最后一个按钮。这是我的代码目前的样子。我知道它仍然需要修复，但我稍后会处理。

<?php for ($i = 1; $i <= 50; $i++) { ?>
<div id="div<?php echo $i; ?>" style="display:none;">
    <div><label>object<?php echo $i; ?></label><br/><br/></div>
</div>
<?php   $j = $i;
}
?>
<div><input type="button" id="btn_next" value="NEXT" onclick="goNext()"/></div>
<div><input type="button" style="display:none;" id="btn_back" value="BACK" onclick="goBack()"/></div>

我认为我的 html/php 元素中没有任何需要更改的内容，但我添加了它以获得更多详细信息。这是我当前的 javascript：

<script type="text/javascript" language="javascript">
for (var i = 0; i <= 5; i++) {
if(document.getElementById('object'+i) != null) {

    if (document.getElementById('object'+i) != null && typeof(document.getElementById('object'+i)) != undefined && document.getElementById('object'+i) != "") {
        var x = document.getElementById('object'+i).style.display = 'block';
        var count5 = +i;
    }
}}

var nextArr = [1, 2, 3, 4, 5];
var prevArr = [1,2,3,4,5];

function goNext(){
var max = "<?php echo $j; ?>"
var num1 = i;
var num2 = num1 + 4;
var num3 = num1 - 1;

for (var next = nextArr.length; next <= num2; next++) {
    document.getElementById('object'+next).style.display = 'block';
}

if(num2 == max){
    document.getElementById('btn_next').style.display = 'none';
}

for (var newArr= 5; newArr <= num3; newArr++)
{
    nextArr[newArr] = [newArr];
}

var quotient = num1 / 5;
if(quotient >= 1) {
    for (var value = num3; value > 0; value--) {
        document.getElementById('object'+value).style.display = 'none';
    }
}

//increment i
i = num2 + 1;

//display back if array lenght is > 5
if(nextArr.length >= 5) {
    document.getElementById('btn_back').style.display = 'block';
}}

function goBack() {
var num1 = i;
var num2 = num1 + 4;
var num3 = num1 - 1;
var num4 = num3 - 5;

i = num2+ 1;

for (var back = num4; back >= 5; back--)
{
    prevArr[back] = [back];
}

var quotient = num1 / 5;
if (quotient >= 1) {
    for(var prev = num4; prev >= 0 ; prev--)
    {
        document.getElementById('hiddendiv'+prev).style.display='block';
    }       
}}</script>

num1 是接下来要显示的 5 个项目的第一个索引，num2 是接下来 5 个项目的最后一个索引，num3 是当前显示的项目的最后一个索引，num4 是当前显示的项目的第一个索引。后退按钮已经做了一些事情，但是，当显示以前的 div 时，我只是无法将手指放在正确的想法上来隐藏元素。任何建议都会很棒。

【问题讨论】：

标签： javascript

【解决方案1】：

我没有给出直接的解决方案，但这是你可以做的让它工作，请原谅我在回答这个问题时没有注意你发布的代码。

具有带有哈希的分页链接，例如 <a href="#page1">1</a> 等
在页面加载时为 hashchange 添加监听器。捕获返回按钮按下以检测hash change in the URL 的简单方法
当 hashchanges 触发 AJAX 调用以获取数据（来自 PHP）
服务器可以在 HTML 片段上返回 JSON。根据数据类型，您可以在回调中构建模板。
在回调中追加/前置/更改搜索结果 DOM。

此外，如果您想提高效率并缓存以前显示的结果，您可以维护一个 JSON 来保存以前的搜索结果。添加一些逻辑来检查是否按下后退按钮只是从 JSON 中弹出数据并显示它。不过，请记住，这种方法在某些情况下可能会适得其反。

【讨论】：