簡單的分頁使用javascript

我想創建一個簡單的分頁使用Javascript（是的，我知道jquery插件，但我真的很想弄清楚如何從頭開始）。無論如何，我非常接近完成分頁，但我無法弄清楚如何讓後退按鈕可以工作。另外，如何添加頁碼以便我可以擁有如下內容：Next ... 1 2 .. 9 10 ... Last？目前我只有下一個和最後一個按鈕。以下是我的代碼當前的樣子。我知道它仍然需要修復，但我會稍後再討論。簡單的分頁使用javascript

<?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時隱藏元素。任何建議都會很棒。

來源

2013-07-05 user1597438

我沒有給出一個簡單明瞭的解決方案，但這是你可以做的工作，並請原諒我我在回答這個問題時沒有關注你發佈的代碼。

有哈希例如<a href="#page1">1</a>等
在頁面加載時添加監聽hashchange分頁鏈接。一個簡單的方法來捕獲後退按鈕按下檢測hash change in the URL
當你火hashchanges AJAX調用來獲取數據（從PHP）
服務器可以在HTML片段返回要麼JSON。根據數據的類型，您可以在回調中構建模板。
追加/前置/更改在回調中搜索結果DOM。

此外，如果您想使其效率更高並緩存先前顯示的結果，則可以維護JSON以保存先前的搜索結果。添加一些邏輯來檢查是否按下了後退按鈕，只需從JSON中彈出數據並顯示它即可。儘管如此，請記住，這種方法在某些情況下會適得其反。

來源

2013-07-05 05:43:13 ch4nd4n

簡單的分頁使用javascript

回答

相關問題