使用javascript进行简单分页
我正在尝试使用Javascript创建一个简单的分页(是的,我知道jquery插件,但我真的很想知道如何从头开始)。无论如何,我很快就要完成分页了,但我不太明白如何才能让后退按钮工作。还有,我怎样才能添加页码,这样我就可以有如下内容:下一步。。。1 2 .. 9 10 ... 最后?目前我只有下一个和最后一个按钮。下面是我的代码目前的样子。我知道它还需要修理,但我以后会处理的使用javascript进行简单分页,javascript,Javascript,我正在尝试使用Javascript创建一个简单的分页(是的,我知道jquery插件,但我真的很想知道如何从头开始)。无论如何,我很快就要完成分页了,但我不太明白如何才能让后退按钮工作。还有,我怎样才能添加页码,这样我就可以有如下内容:下一步。。。1 2 .. 9 10 ... 最后?目前我只有下一个和最后一个按钮。下面是我的代码目前的样子。我知道它还需要修理,但我以后会处理的 <?php for ($i = 1; $i <= 50; $i++) { ?> <div id=
<?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>
我没有给出一个直接的解决方案,但这是你可以做的,让它工作,请原谅我,我回答这个问题时没有注意你张贴的代码
- 具有带有哈希的分页链接,例如
等
- 在页面加载时为hashchange添加侦听器。一种简单的方法来捕捉返回按钮按下以检测
- 当hashchanges发生变化时,您将触发AJAX调用以获取数据(从PHP)
- 服务器可以在HTML片段上返回
JSON
。根据数据类型,您可以在回调中构建模板
- 在回调中追加/Prepend/Alter搜索结果DOM
此外,如果您想使其高效并缓存以前显示的结果,可以维护一个JSON来保存以前的搜索结果。添加一些逻辑来检查是否按下了后退按钮,只需从JSON中弹出数据并显示它。尽管如此,请记住,这种方法在某些情况下可能适得其反
<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>