Блог

Главная - Вопросы по программированию - Jquery sticky th

Jquery sticky th

#javascript #jquery #sticky

#javascript #jquery #липкий

Вопрос:

Я работаю над липким заголовком для таблиц, которые размещаются в середине и ближе к низу страницы. У меня это работает, по большей части, но я не могу понять, как правильно расположить заголовок.

Я пробовал фиксированную позицию, но у нее проблема с прокруткой вне поля, абсолютная путаница с шириной заголовков, а sticky, похоже, вставляет заголовок в таблицу и нарушает форматирование.

Есть идеи? 

     function stickyTableHead(tableID) {
  var $tmain = $(tableID);
  var $parent = $(tableID).parent();
  var pos = $parent.offset().top   $tmain.find(">thead").height();
  var $tScroll = $tmain.children("thead")
    .clone()
    .wrapAll('<table id="tScroll" />')
    .parent()
    .addClass($(tableID).attr("class"))
    .css("position", "sticky")
    .css("top", 0)
    .css("display", "none")
    .prependTo($tmain);


  $($parent).scroll(function() {
    var dataScroll = $tScroll.data("scroll");
    dataScroll = dataScroll || false;
    if (jQuery(this).scrollTop() >= $tmain.find(">thead").height()) {
      if (!dataScroll) {
        $tScroll
          .data("scroll", true)
          .show()
          .find("th").each(function() {
            $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
          });
      }
    } else {
      if (dataScroll) {
        $tScroll
          .data("scroll", false)
          .hide();
      }
    }
  });
}

$(document).ready(function() {
  stickyTableHead('#transactionT');
});

Например, JsFiddle, потому что он слишком длинный для текстового редактора здесь
https://jsfiddle.net/zazvorniki/7g245fr6/54 /

Комментарии:

1. Я создавал что-то подобное, и способ, которым я это создал, состоял из двух таблиц, одной для заголовка и одной для таблицы, полоса прокрутки была на контейнере, а заголовок был липким. Была одна проблема с этим решением, если ячейки имели не фиксированный размер, в моем коде мне нужно было получить размер каждого столбца в таблице, а заголовок добавить, применить больший размер как к заголовку, так и к ячейкам таблицы, чтобы они были одинаковой ширины, и нужно пересчитать размер при изменении размера окна (где я сначала удалил стиль встроенной ширины, чтобы изменить их размер, а затем снова установил ширину).

2. @jcubic, это интересное решение. К сожалению, я не могу этого сделать в этой среде. Таблицы создаются динамически, и у меня нет к этому доступа. Я могу обрабатывать их только постфактум в браузере.

3. Вы применяете jQuery к таблице, чтобы вы могли модифицировать ее с помощью jQuery. Вот как я это делал, также в моем случае таблица была сгенерирована в R shiny framework и динамически обновлялась. Решением, которое я использовал, был MutationObserver, который запускался при обновлении таблицы и запускал код jQuery, который исправлял таблицу. удаляем первую строку и помещаем ее в отдельную таблицу. Точно так же, как это делает любой другой плагин для работы с таблицами jQuery.

4. @jcubic Однако в эти таблицы встроена другая логика, такая как сортировка, которая зависит от заголовков, являющихся частью таблицы. Итак, хотя теоретически я мог бы в этом случае, это не совсем жизнеспособное решение.

5. Я не думаю, что возможно иметь липкий заголовок с одной таблицей только с помощью CSS, но я могу ошибаться. Итак, если вам нужно иметь сортировку или другую функцию, которая присутствует в исходной таблице, вам нужно будет воссоздать эту функцию в вашей собственной таблице или заставить ее работать с исправленной таблицей. Например, скрыть первую строку вместо того, чтобы удалять ее при нажатии на заголовок sticky, вы запускаете щелчок по ячейке скрытой строки.