Remove/hide tfoot last page only in html printing

Question

I have table with data its printing multiple pages every page <tfoot>Some text</tfoot> display end of the page. I want to remove/hide the <tfoot>Some text</tfoot> only in last page. Is there any way to do this with css/javascript? I have tried many ways nothing works

This is sample of what I want. I want to hide the footer while printing.

That too i need help. if i can find the last page i can able to do it — John Rajan, Jul 16 '19 at 06:41
Is it one `` that spreads over multiple print pages? Or are there several tables each on its own page? — yunzen, Jul 16 '19 at 07:07
@JohnRajan What is considered a last page? Is it the latest page that has been added or a page that you've determined to be last? Like, what is the condition for a page to be decided as a last page? — Gosi, Jul 16 '19 at 07:26
@JohnRajan Is the table the last element in your document? Or is it just the last appearance of the ``that you don't want to print? — yunzen, Jul 16 '19 at 07:36
@Gosi This table generated by for loop so when i click print according to the loop no of pages will print in that i want to hide the footer on last page — John Rajan, Jul 16 '19 at 11:27
@yunzen last appearance of the 'Some Text'that i don't want to print.i want hide the "Some Text" only while printing — John Rajan, Jul 16 '19 at 11:31

score 2 · Answer 1 · answered Jul 16 '19 at 07:13

2

If you consider that each page contains only one tfooter, you can try something like this:

// Select all tfooters
const footers = document.querySelectorAll('tfooter');
// Select the last one
const last =  footers[footers.length - 1];
// add a class to hide it
last.classList.add('hidden');

answered Jul 16 '19 at 07:13

KeiZ

31
6

You can add a class that only works in a media query `@media print { .hidden { display:none; } }` – KeiZ Jul 16 '19 at 12:45

score 1 · Answer 2 · edited Jul 16 '19 at 07:33

1

You can just count the number of <tfoot> tag using javascript and just hide the last one.

Do something like this (jQuery example):

var count = $("#div tfoot").length; 
$("tfoot : " +count).hide();

edited Jul 16 '19 at 07:33

barbsan

3,418
11
21
28

answered Jul 16 '19 at 06:56

65th bit

55
1
11

1

You can [edit] you answer, don't post code in comments. – barbsan Jul 16 '19 at 07:35

score 1 · Answer 3 · answered Jul 16 '19 at 07:04

To identify your last page, try to get a specific information in your URL then you can try something like this in Javascript :

First find the last page index :

var itemsCount = 15 -->here you have to get the count of all your elements store in your datatable
var itemPerPage = 6 --> the datatable pagesize

var pageMax = Math.ceil(itemsCount/itemPerPage);
18 items / 6 per page = 3 pages
19 items / 6 per page = 4 pages

Get the index parameter in your URL (refer to this:How can I get query string values in JavaScript?) :

//if your url look like this : http://localhost:5555/home?index=5&pageSize=18
var urlParams = new URLSearchParams(window.location.search);
const myIndex= urlParams.get('index'); // = 3

if(pageMax == myIndex)
{
//hide your element <tfoot></tfoot>
}

Remove/hide tfoot last page only in html printing

3 Answers3