Переход по ссылкам в таблице

Тема в разделе "JavaScript", создана пользователем kashtann, 7 окт 2018.

  1. kashtann

    kashtann Постоялец

    Регистр.:
    5 мар 2016
    Сообщения:
    131
    Симпатии:
    18
    Всем привет! Помогите пожалуйста реализовать задачу:

    Есть главная страница, на ней таблица (пример её во вложении картинка). В таблице есть ссылки которые ведут на соответсвующий материал. Идея в том, чтобы внутри этого материала создать кнопку "вперёд", чтобы та в свою очередь брала ссылку с главной страницы следующего материала и переходила по ней и можно было листать все списки из таблицы не возвращаясь к ней типа как изображения в галерее.
    Ссылки в таблице могут измениться или вовсе строка удалиться, то есть привязка по конкретному адресу не подходит, но для начала было бы не плохо реализовать хоть как-то)
     

    Вложения:

    Последнее редактирование: 7 окт 2018
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    454
    Симпатии:
    1.162
    Таблица на сервере с помощью php генерируется? В том же порядке брать запись следующую

    Если в таблице сортировка по ид по возрастанию, то для ссылки вперёд берём адрес с ид>ид записи ближайшую.

    Обычно это делают так, а не с помощью js

    Если таблица статичная, сделать её копию на сервере и тем же php делать ссылку вперед.
     
  3. kashtann

    kashtann Постоялец

    Регистр.:
    5 мар 2016
    Сообщения:
    131
    Симпатии:
    18
    Таблица не генерируется, просто написана на html. Id можно расставить по строкам, но если строку удалить, то придется остальные переправлять, а их планируется около 50.
    Хотелось бы видеть пример кода, так как в javascript, как и в программировании в целом, вообще не силён так сказать
     
  4. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    Зачем все переправлять.
    Если страница удалится, то зачем править все? Правим только ссылку "вперёд" внутри предыдущей страницы и удаляем строку из таблицы. Два действия.

    Если все страницы статичные, то такое реализовать конечно можно, например через referer, но глупо. Либо делать всё на ajax, то человеку не знающему JS - это будет не по силам, даже если напишем готовый код. Проще на PHP или другом серверном языке написать такое, но и это сильно не поможет.
    Такое из коробки умеют многие CMS, но и там надо разбираться.
     
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    482
    Симпатии:
    322
    На самом деле не сильно сложная вещь, всем вашим ссылкам на главной нужно задать один класс, уникальный в рамках главной страницы. Вот код, для ссылок с классом list и относительных путей, для абсолютных - соответственно будет location.href
    HTML:
    $(document).ready(function(){   //готовность DOM
       var next = $('<a />',{   // создали элемент
         text : 'Следующая',
         href : '#',
         click : function(){   // установили событие click
           var links = $('<div />');
           links.load('/ .list', function(){  // грузим элементы .list с главной   во временный контейнер
              location.pathname = links.find('[href*="'+location.pathname+'"]').next('.list').attr('href'); //после загрузки находим  значение href следующего по списку элемента за элементом с адресом текущей страницы и идем по этому адресу
           });
         }
      });
      $('body').append(next); // добавили созданный элемент на страницу
    });
     
    Последнее редактирование: 11 окт 2018
    kashtann нравится это.
  6. kashtann

    kashtann Постоялец

    Регистр.:
    5 мар 2016
    Сообщения:
    131
    Симпатии:
    18
    Спасибо за ответ. Можно уточнить:

    Не понимаю какое событие вешать на кнопку "вперёд"
     
  7. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    482
    Симпатии:
    322
    click, разумеется. Оно уже повешано в этой строчке:
    Код:
     click : function(){   // установили событие click
    Я привел выше рабочий код, нужно лишь задать классы list ссылкам на главной, посмотреть относительные или абсолютные пути у вас и выбрать место куда будет добавлена кнопка
    $('body').append(next); - добавит в конец всей страницы. Ну и подключить jQuery, если не подключен.
     
    Последнее редактирование: 11 окт 2018
    kashtann нравится это.