Page 1 of 2

scrollable table in table view

Posted: 2018-05-01 20:58
by pbottcher
Hi all,

I thouht that this might be interesting for someone who has larger table to display in the table view.
You can set the records per page , but this may lead to a long scrolling list where, when are in the middle of the table, it might be difficult to scroll to the right.

Hence if you add this

Code: Select all

<style>

.table-responsive { overflow: auto; width: 100%; height: 66vh; }   
.table  th { background:#eef; }
		</style>

<script>

$j('div.table-responsive').on('scroll', function() {
  $j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});

</script>
to the hoos/footer-extras.php you will get a scollable view of your table (table header colored) which allows you to scroll within one page to the bottom of the table and/or to the right as needed. Also the header stay stable.
You may need to adjust the hight to fit your environment.

regards
Pascal

Re: scrollable table in table view

Posted: 2018-05-02 14:58
by Bertv
Thanks for sharing this. It looks great.

Re: scrollable table in table view

Posted: 2018-05-07 08:29
by Jay Webb
This is frigging awesome, works perfect, Thanks for sharing this, one of my table has 20,000 rows now I can increase rows per page to 100.

Re: scrollable table in table view

Posted: 2018-05-07 20:21
by AhmedBR
Thanks for sharing. Works great :D

Re: scrollable table in table view

Posted: 2018-06-28 11:20
by sjohn
This is a very useful and brillant piece of code.

I have already used it in a project, and I think I will use it in ALL projects.
I think that when you have over 1000 records in a table, it will be very relevant to use this.

I also want to thank you, for sharing this with us.

Re: scrollable table in table view

Posted: 2018-12-09 10:22
by hubert
Many thx, perfect, needs to be integrated in AppGini !

Re: scrollable table in table view

Posted: 2019-05-26 20:25
by fgazza
Hi.
You solution work but Unfortunately I discovered that with the solution of pböttcher: viewtopic.php?f=4&t=2673 two annoying problems occur:

1) the icons of the images and the squares of the checkboxes are seen in overlay on the table header line (it happens both in chrome and in microsoft edge)... see screenshots

2) in Microsoft Edge the table header scrolls and does not remain fixed.

I hope someone can suggest me a solution.

Thank you!

Fabiano
sshot1.jpg
sshot1.jpg (116.09 KiB) Viewed 12463 times
sshto2.jpg
sshto2.jpg (208.77 KiB) Viewed 12463 times

Re: scrollable table in table view - another annoying problem

Posted: 2019-05-27 11:22
by fgazza
another annoying problem:
using this function it is not possible to print the entire list of records because a box is printed in which you only see the "framed" records on the screen and the scroll bar on the side.
sshot3.jpg
sshot3.jpg (65.99 KiB) Viewed 12443 times

Re: scrollable table in table view

Posted: 2019-06-18 07:57
by pbottcher
Hi,

here a new version. Hope that fits most needs. Put this either in the hooks/footer-extras.php or if you want to apply it to only one table in the hooks/TABLENAME.php file to the tableview function.

Code: Select all

<?php if ($_REQUEST['Print_x'] != 1) { 
echo $_REQUEST['Print_x'];  
echo <<<EOT
<style>

.table-responsive { overflow: auto; width: 100%; height: 66vh; }   
.table  th { background:#eef; }
</style>
		
<script>
// check for IE
if (navigator.userAgent.search("NET4.0") >= 0) {
	\$j('div.table-responsive').on('scroll', function() {
	  \$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
	});

}
else {
	if (navigator.userAgent.search("Edge") >= 0) {  // check for Edge
		\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
	}
	\$j('div.table-responsive').on('scroll', function() {
	  \$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
	});
}
</script>;	
EOT;
 } ?>

Re: scrollable table in table view

Posted: 2019-06-19 09:01
by fgazza
Great job Pascal!
The only limitation of your code is that when you scroll a table with checkboxes or "file uploaded" icons these elements overlap the header (see screenshots).

A solution to this little problem would make your code PERFECT !!!

Thank you!

Fabiano
Immagine 001.jpg
Immagine 001.jpg (50.83 KiB) Viewed 12299 times
Immagine 002.jpg
Immagine 002.jpg (36.02 KiB) Viewed 12299 times

Re: scrollable table in table view

Posted: 2019-06-23 09:10
by fgazza
Hi Pascal, any news on the little problem that I reported in the previous post?
Let me ask you another question:
when you write "if you want to apply it to only one table put the code in the hooks / TABLENAME.php file to the tableview function."
how can I insert the code in the "tableview function"? Can you give an example?
Thanks a lot!
Fabiano

Re: scrollable table in table view

Posted: 2019-06-27 06:53
by pbottcher
Hi,

I'm working on it.

Re: scrollable table in table view

Posted: 2019-07-17 19:19
by pbottcher
Hi,

here a new version. Try this.

Code: Select all

<?php if ($_REQUEST['Print_x'] != 1) { 
echo $_REQUEST['Print_x'];  
echo <<<EOT
<style>

.table-responsive { overflow: auto; width: 100%; height: 66vh; }   
.table  th { background:#eef; }
</style>
		
<script>
\$j('table').append($j('thead'));
// check for IE
if (navigator.userAgent.search("NET4.0") >= 0) {
	\$j('div.table-responsive').on('scroll', function() {
	  \$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
	});

}
else {
	if (navigator.userAgent.search("Edge") >= 0) {  // check for Edge
		\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
	}
	\$j('div.table-responsive').on('scroll', function() {
	  \$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
	});
}
</script>;	
EOT;
 } ?>

Re: scrollable table in table view

Posted: 2019-07-18 05:27
by fgazza
Thank you but nothing change: The problem that when you scroll a table with checkboxes or "file uploaded" icons these elements overlap the header (see screenshots in my previous post) persist!

Re: scrollable table in table view

Posted: 2019-07-18 06:20
by pbottcher
Hi,

sorry there was a \ missing. Can you try

<?php if ($_REQUEST['Print_x'] != 1) {
echo $_REQUEST['Print_x'];
echo <<<EOT
<style>

.table-responsive { overflow: auto; width: 100%; height: 66vh; }
.table th { background:#eef; }
</style>

<script>
\$j('table').append(\$j('thead'));
// check for IE
if (navigator.userAgent.search("NET4.0") >= 0) {
\$j('div.table-responsive').on('scroll', function() {
\$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});

}
else {
if (navigator.userAgent.search("Edge") >= 0) { // check for Edge
\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
}
\$j('div.table-responsive').on('scroll', function() {
\$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});
}
</script>;
EOT;
} ?>

Re: scrollable table in table view

Posted: 2019-07-18 09:01
by fgazza
:P it works like a charm!!! Thank You! Fabiano

Re: scrollable table in table view

Posted: 2019-09-09 10:50
by Ionut Bocanet
Dear Sirs,

What i need to add in the code to be applied also to the child tables this code.

I have a table linked with 2 other tables.

When i want to print , i have the main record with records from other 2 tables.

The record is working perfectly when i print just record from main table but when i add child records appear only o portion in the child records. :shock:

See picture for more details.

Thank you in advance

Re: scrollable table in table view

Posted: 2020-07-20 18:32
by pfrumkin
Hi Pascal,

This is great :D ! It took me longer to read through the forum posts than to do the copy-n-paste and see it work.

~Paul

Re: scrollable table in table view

Posted: 2021-03-10 18:25
by rpierce
How can I increase the number of records displayed. The most I can show now is 500 rows

Re: scrollable table in table view

Posted: 2021-03-10 18:28
by rpierce
Where exactly in the hooks/tablename table view do you insert the code?

switch($contentType){
case 'tableview':
$header='';
break;

Re: scrollable table in table view

Posted: 2021-03-11 20:23
by pbottcher
Hi,

rather put it into the _footer part.

Also, the amount of records is controled by the settings in AppGini directly.

Re: scrollable table in table view

Posted: 2021-07-06 01:19
by sacgtdev
Where to put in the hook code?:

Code: Select all

	function project_date_footer($contentType, $memberInfo, &$args) {
		$footer='';

		switch($contentType) {
			case 'tableview':
				$footer='//insert your code here?//';
				break;

			case 'detailview':
				$footer='';
				break;

			case 'tableview+detailview':
				$footer='';
				break;

			case 'print-tableview':
				$footer='';
				break;

			case 'print-detailview':
				$footer='';
				break;

			case 'filters':
				$footer='';
				break;
		}

		return $footer;
	}



Re: scrollable table in table view

Posted: 2021-07-06 18:03
by pbottcher
Yes

Re: scrollable table in table view

Posted: 2021-07-07 00:50
by sacgtdev
I got the following error: Parse error: syntax error, unexpected 'Print_x' (T_STRING)

I paste the code at tablename.php under function tablename_footer for tableview

Code: Select all

$footer='<?php if ($_REQUEST['Print_x'] != 1) {
echo $_REQUEST['Print_x'];
echo <<<EOT
<style>

.table-responsive { overflow: auto; width: 100%; height: 66vh; }
.table th { background:#eef; }
</style>

<script>
\$j('table').append(\$j('thead'));
// check for IE
if (navigator.userAgent.search("NET4.0") >= 0) {
\$j('div.table-responsive').on('scroll', function() {
\$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});

}
else {
if (navigator.userAgent.search("Edge") >= 0) {
\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
}

\$j('div.table-responsive').on('scroll', function() {
\$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});
}
</script>;
EOT;
} ?>';


Re: scrollable table in table view

Posted: 2021-07-07 05:56
by pbottcher
Hi,

if you use it in the footer, you need to slightly change the syntax.

Try

Code: Select all

			case 'tableview':
			if ($_REQUEST['Print_x'] != 1) {
			$footer=<<<EOT
			<style>

			.table-responsive { overflow: auto; width: 100%; height: 66vh; }
			.table th { background:#eef; }
			</style>

			<script>
			\$j('table').append(\$j('thead'));
			// check for IE
			if (navigator.userAgent.search("NET4.0") >= 0) {
			\$j('div.table-responsive').on('scroll', function() {
			\$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
			});

			}
			else {
			if (navigator.userAgent.search("Edge") >= 0) {
			\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
			}

			\$j('div.table-responsive').on('scroll', function() {
			\$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
			});
			}
			</script>;
EOT;
			};
			break;