2 replies to this topic

[ripcord]

Доброго дня!
Ваш компонент прекрасен, вы отличная команда, и да, я перечитал весь форум, прежде чем делать новый пост.
Будьте любезны, помогите! Обстоятельства требуют странного, а мне так и не удалось их побороть в одиночку.
Сейчас около 5000 айтемов в 100 категориях ориентировочно. Еще около 10 Килоайтемов ждут своего часа, покуда эти 5 не обживутся. Категорий останется тоже число.
В каждом кате айтемы расположены фиксированно, иначе говоря, я не могу рушить структуру, тасуя или группируя их иначе. Ну, хитрое оборудование, мелкие соленоиды, клапаны, приводы, катушки, датчики, микромоторы и т.д.
При этом, у каждого одного отдельного айтема от трех до, максимум, десяти характеристик, при общем их количестве уникальных на категорию до двадцати.
Т.о., если выводить их тизеры построчно DIV`ами, можно как-то сублимировать до известной меры, но это не выход, один фиг,  респонзив дизайн, начинают плавать кто куда горазд.
Решением мне показалась ваша фича с таблицей того крутого чувака. Тем более, с сортировкой, что отдельный сладкий ништяк, каких сейчас редко.

И все бы хорошо, но эти <th>###</th>, которые нужно прописывать фиксированным числом, портят весь расклад!
Я прописываю, например, 12, но на выходе нужно получить меньше. Получается как-то так:



или так, если включить отображение заголовков:



Хочется, чтоб без напрягов, как-будто это обычный тизер, который не рендерит заголовок при пустом содержимом.
Теоретически, заюзав что-нибудь, типа ".tablesorter TR:first-child TD:before" и ".jbzoo TABLE.tablesorter TH{color:transparent !important;}" можно это зарулить, но на такое кощунство я не готов пойти. Не тот компонент для подобного обращения

Как мне мне быть, светлые вы головы?

[SmetDenis]

Так наверно не получится сделать.

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

Как вариант...
Внутри шаблона teaser с помощью глобальной переменной вести учет о  кол-ва столбцов.
В шаблоне item_columns весь вывод от тизеров внутри цикла foreach собирать в переменную.
Далее на основе глобального флага из тизера сгенерировать нужногт кол-во столбцов и вывести всю таблицу.

Черновой вариант кода

<?php
$this->app->jbassets->tablesorter();

echo $this->app->jbjoomla->renderPosition('jbzoo_database_filter');

if ($vars['count']) {
    $html = array();
    foreach ($vars['objects'] as $object) {
        $html[] = $object;
    }
    ?>
    <table class="jsTableSorter tablesorter zebra">
        <caption>Сравнительная таблица</caption>
        <thead>
        <tr>
            <?php echo str_repeat('<th>cell</th>', $_GLOBALS['teaser_counter']);?>
        </tr>
        </thead>
        <tbody><?php echo implode("\n ", $html);?></tbody>
    </table>
<?php
}

Либо какое-то отважное решение как фикс с помощью jQuery "на лету".

В планах через версию, у нас стоит решение подобной проблемы, но ничего обещать вам не буду.

[ripcord]

Благодарю за развернутый ответ!
Поскольку это у вас в планах на будущее, решил вопрос отложить и временно обойтись правкой CSS.

Возможно еще кому-нибудь пригодится:

1) В "table-app.php" добавляем любое количество "<th></th>" (Мой вариант ниже подразумевает написание без заголовка)
2) В настройке вывода табличного тизера включаем отображение имени поля с разделением через div. (на этом этапе отображение таблицы бужет похоже на то, что на 2-м скрине первого сообщения)
3) Добавляем в CSS содержимое окна с кодом:

.jsTableSorter TD DIV,.jsTableSorter TD A {
  display: block;
}

.jsTableSorter TR.table-row:first-child TD {
  font-weight: bold;
  line-height: 2 !important;
  overflow: hidden;
  padding-top: 0px;
  pointer-events: none;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  visibility: visible;
}

.tablesorter TD A {
  pointer-events: all;
}

.jsTableSorter TR.table-row:first-child DIV:before,.jsTableSorter TR.table-row:first-child A:before {
  content: "";
  display: block;
  height: 5px;
  position: relative;
  width: inherit;
}

.jsTableSorter TR.table-row TD {
  font-size: 0px;
  line-height: 0 !important;
  visibility: hidden;
}

.jsTableSorter TR.table-row TD DIV,.jsTableSorter TR.table-row TD A {
  font-size: inherit;
  font-weight: normal;
  line-height: normal;
  visibility: visible;
}

.jbzoo TABLE.tablesorter THEAD TR TH:after {
  background-color: #F8F8F8;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #D7D7D7;
  content: "";
  display: inherit;
  height: 25px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  visibility: visible;
  width: 100%;
}

.jbzoo TABLE.tablesorter THEAD TR TH:first-child:after {
  border-left: none;
}

.jbzoo TABLE.tablesorter THEAD TR TH.headerSortUp:after {
  background-color: #E9E9E9;
  background-image: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  display: block;
  moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
  ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
  webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
}

.headerSortDown:before,.headerSortUp:before {
  border-color: transparent transparent #666;
  border-style: solid;
  border-width: 4px;
  content: "";
  height: 0;
  margin: 6px 0 0 10px;
  position: absolute;
  visibility: visible;
  width: 0;
  z-index: 1;
}

.headerSortUp:before {
  border-color: #666 transparent transparent;
  margin-top: 11px;
}

.jbzoo TABLE.tablesorter THEAD TR TH,.jbzoo TABLE.tablesorter TFOOT TR TH {
  border-top: 1px solid #CCC;
  cursor: pointer;
  overflow: hidden;
}

4) После подгонки под Ваш текущий шаблон, должно получиться как-то так:

(тут стрелки рисуются псевдоэлементами, уберите, если используете встроенный base64)

или так:


Т.о., если в шаблоне категории предусмотрено большее количество полей, чем имеется у какого-то числа айтемов этой категории, мы избавляемся от необходимости терпеть пустые столбцы в таблице. Вдобавок, на месте <TH> получаем имя соответствующей позиции без необходимости индивидуальной подгонки в "table-app.php".
Метода "грязная", но малоинвазивная и простая в реализации. В свете "необещанного" разработчиками положительного решения этого вопроса в будущих версиях, временно вполне применимая.