Dynamic table page break

OL Connect Professional Designer
1

Hi Everyone,

I am currently working on latest dynamic table. I want to show groupName at the first cell of each page(when page break).

I have tryied query(“tr:nth-child(1) td:nth-child(1)”, results).html(“Cash”) but it only happens on the first page

image
image1141×578 17.6 KB

Is there anyway i can show it again with extra info(GroupName continued) when it break to next page?

Manythanks

2

The pagination algorithm generates a new table for each page the data runs on. This allows you to toggle the visibility using CSS. I’d simply add the groupName to the first cell of all rows and add the following CSS to the context_print_styles.css stylesheet.

The first rule hides the content for all first cells, where the second rule makes the content of the first cell on the first row visible again.

#Core_Cash tbody tr td:first-child  {
	visibility: hidden
}

#Core_Cash  tbody tr:first-child td:first-child {
	visibility: visible
}

Hope this works for you,

Erik

1 Like
3

Thanks so much !! it does work :slight_smile:

However what if i want to change GroupName when it breaks?(Such as “adding continue” so that the second page GroupName will show as “Cash(Continue)” )

So basicly, is there a way i can know the break when i use dynamic table,and select that break table and do some content and style editing.

Many thanks

4

I have figue it out with Post Pagination Script by keep seraching children with get(0) function.
However let me if you have any other better idea, that will be perfect
thanks :slight_smile:

Cain

5

No need for a Post Pagination script, this can be achieved using a standard User Script.

  1. First add a class to the table cell holding the GroupName, for example ‘groupName’.
  2. Create a User Script and use the class as the selector (.groupName)
  3. At the bottom of the Script Editor dialog you’ll find the Options section. Open this section and select the “Each matched element”-option. This creates an iteration over the matched elements and exposes the ‘this’ object.
  4. Enter the script below. It appends the text ’ (continued)’ for all items except for the first entry (index = 0).

This should do the trick.

Erik

if ( this.index > 0 ) {
	this.append( ' (continued)' );
}

matched-elements
matched-elements763×448 8.97 KB

2 Likes
6

That Each matched element is an awesome function!!! which gives me so many controls on dynamic table!

Just switched recently from 2018 to 2021 version, still going strough the documentations :smile: