Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/21: Рейтинг темы: голосов - 21, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 20.03.2015
Сообщений: 127
1

Постраничная навигация на js

08.06.2015, 16:48. Показов 4262. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
На php выводиться тест сразу 30 вопросов. Через js постраничную навигацию сделал. Отмечаю первую страницу и перехожу на вторую. Но когда обратно перелистываю ответы остается не отмеченным. Почему то теряется.
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
    pager.paragraphsPerPage = 24; // Устанавливаем количество элементов на странице
    pager.pagingContainer = $('#content'); // Устанавливаем основной контейнер
    pager.paragraphs = $('p', pager.pagingContainer); // Подсчитываемые элементы
    pager.showPage(1); // Начинаем просмотр с первой страницы
});
</script>

imtech_pager.js
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var Imtech = {};
Imtech.Pager = function() {
 
    // Парметры по умолчанию 
    this.paragraphsPerPage = 3;                         // Количество элементов на странице
    this.currentPage = 1;                               // Страница, которая открыается при инициализации
    this.pagingControlsContainer = "#pagingControls";   // Контейнер для ванигации 
    this.pagingContainerPath = "#content";              // Контейнер c содержанием
    
    // Подсчет общего количества страниц
    this.numPages = function() {
        var numPages = 0;
        if (this.paragraphs != null && this.paragraphsPerPage != null) {
            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
        }
        
        return numPages;
    };
    
    // Выводим страницу. 
    // Аргументы:
    //  page - номер страницы, которую нужно вывести
    this.showPage = function(page) {
        this.currentPage = page;
        var html = "";
        // Формируем содержание текущей страницы
        for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) {
            if (i < this.paragraphs.length) {
                var elem = this.paragraphs.get(i);
                html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">";
            }
        }
        
        // Включаем сформированное содержание в структуру DOM
        $(this.pagingContainerPath).html(html);
        
        // Обновляем навигацию
        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
        
    }
    
    // Обновляем навигацю.
    // Аргументы:
    //  container - контейнер для содержания текущей страницы;
    //  currentPage - номер текущей страницы;
    //  numPages - общее колчисетво страниц.
    var renderControls = function(container, currentPage, numPages) {
        // Формируем разметку навигации
        var pagingControls = "Страница: <ul>";
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                pagingControls += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>";
            } else {
                pagingControls += "<li>" + i + "</li>";
            }
        }
        
        pagingControls += "</ul>";
        
        // Вставляем разметку навигации в DOM
        $(container).html(pagingControls);
    return false;
    }
}
Как оставить отмеченными????
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.06.2015, 16:48
Ответы с готовыми решениями:

постраничная навигация
&lt;section id=&quot;section_2&quot;&gt; &lt;article class=&quot;str&quot;&gt; &lt;a href=&quot;index.php&quot;&gt;Главная&lt;/a&gt; &amp;raquo;...

Постраничная навигация Ajax
Здравствуйте уважаемые форумчане, помогите реализовать постраничную навигацию как на сайте &quot;В...

нужна постраничная навигация
Есть код: &lt;html&gt; &lt;style&gt; #nav img#left_img { position:absolute; top:0; left:0; } #nav...

Постраничная навигация на ajax запросах
Есть div , он ограничен по размеру так, чтобы в него вошло 5 div-ов с определенных контентом.При...

3
Модератор
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
08.06.2015, 18:42 2
Если я правильно вас понимаю, то вы затираете старое html новым. В таком случае у вас при переходе создаются новые ( не заполненные данные ). Храните эти данные в localstorage, например и при отрисовке заполняйте их из него
0
0 / 0 / 0
Регистрация: 20.03.2015
Сообщений: 127
09.06.2015, 07:02  [ТС] 3
Thisman, Можете в примере показать???
0
Модератор
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
09.06.2015, 09:15 4
push007, Вот пример

Я использовал свою новигацию, но суть одна:
- Создаем объект, где будем хранить клиентские ответы
- При создании элемента на странице, проверяем есть ли в объекте ответ на него ,если есть загружаем
- При изменение поля value у элемента сохраняем значение в объект-ответов

Код большой, поэтому только часть:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
  Pagination - это мой объект для работы с пагинации, лень было ваш переносить
  Сохраняем данные при переходе на следующую страницу 
*/
Pagination.savedData = {}; // массив где мы храним ответы введеные пользователем
// передавать нужно DOM-элемент, так как мы сохраняем по id
Pagination.saveAnswer = function (input) {
  Pagination.savedData[input.id] = input.value;
};
Pagination.loadAnswer = function (input) {
  return Pagination.savedData[input.id];
};
 
 
//@element -ваш инпут, которые создаете. Создавайте не через строку, только как вы сейчас это делаете!
... {
 
    /* Тут мы сначала загружаем ответ из объекта, если он есть, если нет оставляем поле пустым */
    element.value = Pagination.loadAnswer(element) || "";
    /* Вешаем обработчик на элемент, при изменении value ответ автоматически сохранится или перезапишется*/
    element.onchange = function () {
      Pagination.saveAnswer(this);
      console.log(Pagination.savedData);
    };
 
}
0
09.06.2015, 09:15
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.06.2015, 09:15
Помогаю со студенческими работами здесь

Постраничная навигация
Здравствуйте. Подскажите почему в мозиле не работает этот код? Во всех остальных браузерах...

Постраничная навигация
Доброго время суток форумчяни, не как не могу разобраться с данной задачей. Зада такова: - ссылка...

Постраничная навигация сбоку
вот сайт демоверсии - http://alvarotrigo.c...tiScroll/#first постраничная навигация там...

Постраничная навигация
Нужно по нажатию на кнопку вывести песни определенного жанра. При нажатии на кнопку выводится то...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru