Javascript-форум - Пагинация на AJAX

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Пагинация на AJAX (https://javascript.ru/forum/misc/66953-paginaciya-na-ajax.html)

Пагинация на AJAX

Всем привет, подскажите пожалуйста какую то AJAX пагинацию, что бы к примеру:
<div class="content">Тут контент, html код</div>
<div class="content">Тут контент, html код</div>
<div class="content">Тут контент, html код</div>
<div class="content">Тут контент, html код</div>
<div class="content">Тут контент, html код</div>

И вот после 3 div мне надо скрыть все что снизу, и вывести навигацию 1,2,3,4 и т.д.

<div class="content">Тут контент, html код</div>
<div class="content">Тут контент, html код</div>
<div class="content">Тут контент, html код</div>
1,2

В интернете искал, что то есть, но как то размазано. Если готового такого нету в интернете, я готов заплатить тому кто поможет в реализации.

admiral,
а причём тут

Цитата:

Сообщение от admiral

AJAX

admiral,
http://javascript.ru/forum/events/59...tml#post396820
http://javascript.ru/forum/project/5...tml#post389710
есть и другие примеры на форуме

рони, да вы волшебник) С меня за подсказку, вам, как обычно скину спасибку, на тот же номер?)

admiral,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .content:nth-child(n+4){
     display: none;
   }
   .open{
     cursor: pointer;
      font-weight: bold;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$(".content:nth-child(n+4)").each(function(indx, el){
$("<a/>", {"class" : "open",text : ++indx, on : {click : function(event) {
event.preventDefault()
$(el).slideToggle();
}}}).insertBefore(el)
      });
});
  </script>
</head>

<body>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код</div>

</body>
</html>

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

admiral,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .content:nth-child(n+4){
     display: none;
   }
   .open{
     cursor: pointer;
      font-weight: bold;
      margin: 0 8px;
   }
     .active{
        color:  #FFFFFF;
         background-color: #A9A9A9;
     }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var cont = $(".content:nth-child(n+4)"),
        first = cont.first();
    cont.each(function(indx, el) {
        $("<a/>", {
            "class": "open",
            text: ++indx,
            on: {
                click: function(event) {
                    event.preventDefault();
                    $(".open").not($(this).addClass("active")).removeClass("active");
                    cont.not($(el).slideToggle()).slideUp()
                }
            }
        }).insertBefore(first)
    })
});
  </script>
</head>

<body>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код</div>
 <div class="content">Тут контент, html код 4</div>
 <div class="content">Тут контент, html код 5</div>

</body>
</html>