scrollable table in table view

Got something cool to share with AppGini users? Feel free to post it here!
pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

scrollable table in table view

Post by pbottcher » 2018-05-01 20:58

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
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

Bertv
Veteran Member
Posts: 65
Joined: 2013-12-11 15:59

Re: scrollable table in table view

Post by Bertv » 2018-05-02 14:58

Thanks for sharing this. It looks great.
Bert
I am using Appgini 5.75

User avatar
Jay Webb
Veteran Member
Posts: 80
Joined: 2017-08-26 15:27
Contact:

Re: scrollable table in table view

Post by Jay Webb » 2018-05-07 08:29

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.
What we envision, we make happen.

AhmedBR
AppGini Super Hero
AppGini Super Hero
Posts: 327
Joined: 2013-09-19 10:23

Re: scrollable table in table view

Post by AhmedBR » 2018-05-07 20:21

Thanks for sharing. Works great :D
AppGini 22.14 - xampp 3.3.0 - PHP 7.4.30 - Summary reports - Calendar - Mass update - Messages - AppGiniHelper

sjohn
Veteran Member
Posts: 86
Joined: 2018-05-23 09:32

Re: scrollable table in table view

Post by sjohn » 2018-06-28 11:20

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.

hubert
Veteran Member
Posts: 50
Joined: 2018-12-06 22:32

Re: scrollable table in table view

Post by hubert » 2018-12-09 10:22

Many thx, perfect, needs to be integrated in AppGini !

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: scrollable table in table view

Post by fgazza » 2019-05-26 20:25

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 12467 times
sshto2.jpg
sshto2.jpg (208.77 KiB) Viewed 12467 times

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: scrollable table in table view - another annoying problem

Post by fgazza » 2019-05-27 11:22

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 12447 times

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2019-06-18 07:57

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;
 } ?>
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: scrollable table in table view

Post by fgazza » 2019-06-19 09:01

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 12303 times
Immagine 002.jpg
Immagine 002.jpg (36.02 KiB) Viewed 12303 times

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: scrollable table in table view

Post by fgazza » 2019-06-23 09:10

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2019-06-27 06:53

Hi,

I'm working on it.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2019-07-17 19:19

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;
 } ?>
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: scrollable table in table view

Post by fgazza » 2019-07-18 05:27

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!

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2019-07-18 06:20

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;
} ?>
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: scrollable table in table view

Post by fgazza » 2019-07-18 09:01

:P it works like a charm!!! Thank You! Fabiano

Ionut Bocanet
Posts: 28
Joined: 2017-03-12 09:26
Contact:

Re: scrollable table in table view

Post by Ionut Bocanet » 2019-09-09 10:50

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
Attachments
example.png
example.png (219.14 KiB) Viewed 10929 times
Best Regards,
Ionut Bocanet

pfrumkin
Veteran Member
Posts: 157
Joined: 2020-02-18 17:58
Location: Albuquerque, New Mexico USA

Re: scrollable table in table view

Post by pfrumkin » 2020-07-20 18:32

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

rpierce
Veteran Member
Posts: 255
Joined: 2018-11-26 13:55
Location: Washington State

Re: scrollable table in table view

Post by rpierce » 2021-03-10 18:25

How can I increase the number of records displayed. The most I can show now is 500 rows

rpierce
Veteran Member
Posts: 255
Joined: 2018-11-26 13:55
Location: Washington State

Re: scrollable table in table view

Post by rpierce » 2021-03-10 18:28

Where exactly in the hooks/tablename table view do you insert the code?

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2021-03-11 20:23

Hi,

rather put it into the _footer part.

Also, the amount of records is controled by the settings in AppGini directly.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Re: scrollable table in table view

Post by sacgtdev » 2021-07-06 01:19

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;
	}



pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2021-07-06 18:03

Yes
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Re: scrollable table in table view

Post by sacgtdev » 2021-07-07 00:50

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;
} ?>';


pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pbottcher » 2021-07-07 05:56

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;
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

Post Reply