Когда TABLE занимает несколько страниц, как я могу сделать так, чтобы TFOOT на первой странице говорил «продолжение ...»? - PullRequest
Новая
       4

Когда TABLE занимает несколько страниц, как я могу сделать так, чтобы TFOOT на первой странице говорил «продолжение ...»?

3 голосов
/ 07 января 2020

В документе HTML, созданном с помощью шаблонизатора, у меня есть таблица учетных данных - переменное число строк с «общим итогом» внизу. Иногда эта таблица перетекает на другую страницу. Когда это происходит, для пользователя не очевидно, что на другой странице есть больше данных, если только он не ищет общую сумму и не может ее найти.

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

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

Можно ли использовать HTML, CSS или Javascript, чтобы вставить сообщение "(продолжение ...)" в конец каждой страницы, охватываемой многостраничной таблицей?

Ответы [ 4 ]

1 голос
/ 22 января 2020

Нет, насколько мне известно, это невозможно, по крайней мере, только с CSS.

Интуитивно понятно, что решение может быть чем-то вроде: 

@media print {
  tfoot:not(:last-child) span::after {
    content: "\2014 continued\2026";
  }
}
<table>
  <tfoot>
    <tr>
      <th><span>Footer</span></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><span>A</span></td>
    </tr>
  </tbody>
</table>

Но даже при печати страницы HTML, содержащей <table>, который слишком длинен, чтобы поместиться на одной странице, он распределяется по нескольким страницам и <tfoot> (и / или <thead>) повторяется на каждой странице. В документе HTML все еще есть только один фактический элемент <tfoot>, и, насколько мне известно, CSS не позволяет выбирать определенные c вхождения. И, таким образом, можно изменить только все повторения (вместо, например, всех, кроме последнего в нашем случае).

1 голос
/ 14 января 2020

Можно начать с создания медиазапроса, содержащего ваши стили печати, и с помощью content добавить сообщение «(продолжение ...)». 

@media print {
  tfoot::after {
    content: " continued...";
  }
}

Конечно, сложнее всего удалить его на последней странице. Возможно, вы сможете выполнить sh, используя Prince . В частности, проверьте решение Two-Pass .

0 голосов
/ 20 января 2020

Это возможно, если вам известны таблицы данных. Таблицы данных - это плагин jquery для вашей страницы, который вставляет нумерацию страниц и общее количество страниц, содержащихся в вашем шаблоне / таблице. Пользователям будет полезно получить правильное представление о том, сколько записей у вас есть. и в последнем ряду, используя colspan, вы всегда можете показать общее количество. Вместо того, чтобы вставлять «Продолжить ..», вы сможете показать общее количество записей.

Для справки проверьте документацию таблиц данных: https://datatables.net/

0 голосов
/ 20 января 2020

Вы пытались использовать onbeforeprint? Согласно MDN :

... Эти события возникают до того, как открывается диалоговое окно печати ... позволяют страницам изменять свое содержимое до начала печати ...

Так что-то вроде этого должно работать: 

window.onbeforeprint = (event) => {
  const footers = document.querySelectorAll('tfoot');
  for (var i=0; i < footers.length; i++) {
    footers[i].innerHTML = 'continue...';
  }
  document.querySelector('table:last-of-type tfoot').innerHTML = 'last one';  
};
<h1>Hit conrtol+p or any other method for printing</h1>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
...