Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2017, 00:07
Интересующийся
Отправить личное сообщение для admiral Посмотреть профиль Найти все сообщения от admiral
 
Регистрация: 01.11.2016
Сообщений: 22

Пагинация на 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

В интернете искал, что то есть, но как то размазано. Если готового такого нету в интернете, я готов заплатить тому кто поможет в реализации.
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2017, 00:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

admiral,
а причём тут
Сообщение от admiral
AJAX
?
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2017, 00:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

admiral,
Пейдженатор с помощью скриптов
Динамическая пагинация в Bootstrap
есть и другие примеры на форуме
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2017, 00:40
Интересующийся
Отправить личное сообщение для admiral Посмотреть профиль Найти все сообщения от admiral
 
Регистрация: 01.11.2016
Сообщений: 22

рони, да вы волшебник) С меня за подсказку, вам, как обычно скину спасибку, на тот же номер?)
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2017, 00:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2017, 00:44
Интересующийся
Отправить личное сообщение для admiral Посмотреть профиль Найти все сообщения от admiral
 
Регистрация: 01.11.2016
Сообщений: 22

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

Последний раз редактировалось admiral, 20.01.2017 в 00:51.
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2017, 00:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправка формы после ajax проверки ShutTap Общие вопросы Javascript 15 08.04.2016 11:46
Объект ajax и приостановка функции kilohertz_. AJAX и COMET 5 18.01.2015 16:33
Пагинация AJAX NetMale AJAX и COMET 4 23.04.2012 00:08
Ajax таблица gofkane Работа 0 25.09.2011 11:53
Ajax разбор метода mycoding jQuery 14 21.05.2010 10:57