Форум

admiral · #1 (**permalink**) 20.01.2017, 00:07

Всем привет, подскажите пожалуйста какую то 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

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

рони · #2 (**permalink**) 20.01.2017, 00:14

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

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

AJAX

?

рони · #3 (**permalink**) 20.01.2017, 00:32

admiral,
Пейдженатор с помощью скриптов
Динамическая пагинация в Bootstrap
есть и другие примеры на форуме

admiral · #4 (**permalink**) 20.01.2017, 00:40

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

рони · #5 (**permalink**) 20.01.2017, 00:42

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>

admiral · #6 (**permalink**) 20.01.2017, 00:44

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

рони · #7 (**permalink**) 20.01.2017, 00:58

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>

Форум

Справочник

Discord чат

Курсы javascript