Смысл печатной нумерации, на мой взгляд, состоит в том, чтобы не разбивать вещи плохо. И, как правило, чаще всего вам не нужно разбивать таблицы на таблицы. Так что это подход, который предполагает, что вы изменили <div> в форматирование таблицы и сгруппировали наборы строк, которые не следует разбивать на <tbody> группировки.
Мы хотим пометить верхний и нижний колонтитулы для кода, который нужно найти, и мы не обязательно хотим, чтобы они отображались там, где они описаны
Это вызывается при загрузке страницы, но вместо этого может вызываться непосредственно перед печатью.
<script>
$().ready(function () {
$('table.paged').each(function (i, o) {
BreakPages($(o));
})
});
function BreakPages(jSource) {
$('body').width("7in");
var perInch = $('body').width() / 7.5;
var nPageHeight = 9 * perInch;
var jHeader = null;
var jFooter = null;
var jWrapper = jSource.clone().empty();
var jPage = null;
var iPage = 0;
jSource.after("<div></div>");
var jFixed = jSource.next();
function substed(jStuff) {
var jCopy = jStuff.clone();
jCopy.find('span.pageNo').html(" " + iPage + " ").removeClass('pageNo');
return jCopy;
}
jSource.children().each(
function (iChunk, oChunk) {
var jChunk = $(oChunk);
if (jChunk.hasClass('footer')) {
jFooter = jChunk;
}
if (jChunk.hasClass('header')) {
jHeader = jChunk;
jFooter = jChunk.nextUntil('.footer').last().next();
}
if (!jChunk.hasClass('sample')) {
var nHeight = jChunk.height();
if (jPage)
nHeight += jPage.height();
if (jFooter)
nHeight += jFooter.height();
if (nHeight > nPageHeight) {
if (jFooter)
jPage.append(substed(jFooter));
jPage.after("<p style='page-break-after:always; height:0; width:0'> </p>");
jPage = null;
}
if (!jPage) {
iPage++;
jPage = jWrapper.clone();
jFixed.append(jPage);
if (jHeader && jHeader !== jChunk)
jPage.append(substed(jHeader));
}
jPage.append(jChunk);
}
}
);
jFixed.find('span.pageCount').html(" " + iPage + " ");
jFixed.find('span.pageNo').html(" " + iPage + " ");
jSource.remove();
}
</script>
Мы раскладываем таблицу так, чтобы она была разбита на страницы.
<body>
<table>
<tbody class="header">
PAGE ONE HEADER
</tbody>
<tbody class="header sample">
LATER PAGE HEADER (IF RELEVANT)
</tbody>
<tbody class="together">
ROW GROUP 1
</tbody>
<tbody class="together">
ROW GROUP N
</tbody>
<tbody class="footer">
FOOTER
</tbody>
</table>
</body>
Мы просматриваем <tbody> и добавляем нижний колонтитул и верхний колонтитул перед тем, как какой-либо элемент должен оборваться в конце страницы.
Мы помечаем верхние и нижние колонтитулы классами css и отслеживаем возможность изменения верхних и нижних колонтитулов, помещая их в те места в потоке строк, где они должны быть изменены, но оставляя их невидимыми для другого класса css.
К сожалению, некоторые реализации разрыва страниц применяются только к строго «блочным» элементам, поэтому он не определен для tbody. Поэтому я применил его к классу тегов <p>, добавляемому к каждой таблице страниц.