Простая разбивка на страницы с использованием javascript

Question

Я пытаюсь создать простую разбивку на страницы с помощью 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 является 1-й индекс отображаемых в данный момент элементов. Однако кнопка «Назад» уже что-то делает, я просто не могу погладить правильную идею, чтобы скрыть элементы, когда отображаются предыдущие div. Любые предложения были бы замечательными.

Answer 1

Я не даю прямого решения, но это то, что вы можете сделать, чтобы заставить его работать, и простить меня. Я отвечаю на это, не обращая внимания на код, который вы опубликовали.

• Есть ссылки разбивки на страницы с хэша, например <a href="#page1">1</a> т.д.
• На странице нагрузки добавить слушателя для hashchange. Простой способ, чтобы захватить обратно нажмите кнопку для обнаружения hash change in the URL
• Когда hashchanges вы стреляете AJAX вызова для извлечения данных (с PHP)
• Сервер может вернуть JSON на HTML-фрагмента. В зависимости от типа данных вы создаете шаблон в обратном вызове.
• Append/Prepend/Alter Результат поиска DOM в обратном вызове.

Кроме того, если вы хотите сделать его эффективным и кэшировать ранее показанный результат, вы можете поддерживать JSON для хранения предыдущего результата поиска. Добавьте некоторую логику, чтобы проверить, была ли нажата кнопка «Назад», просто вытаскивают данные из JSON и отображают ее. Хотя, имейте в виду, что этот подход может иметь неприятные последствия в некоторых случаях.