scrollable table in table view

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 638
Joined: 2018-04-01 10:12

scrollable table in table view

Post by pböttcher » 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

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: 55
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
Veteran Member
Posts: 194
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

sjohn
Veteran Member
Posts: 85
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
Posts: 17
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: 116
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 2044 times
sshto2.jpg
sshto2.jpg (208.77 KiB) Viewed 2044 times

fgazza
Veteran Member
Posts: 116
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 2024 times

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 638
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pböttcher » 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;
 } ?>

fgazza
Veteran Member
Posts: 116
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 1880 times
Immagine 002.jpg
Immagine 002.jpg (36.02 KiB) Viewed 1880 times

fgazza
Veteran Member
Posts: 116
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

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 638
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pböttcher » 2019-06-27 06:53

Hi,

I'm working on it.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 638
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pböttcher » 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;
 } ?>

fgazza
Veteran Member
Posts: 116
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!

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 638
Joined: 2018-04-01 10:12

Re: scrollable table in table view

Post by pböttcher » 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;
} ?>

fgazza
Veteran Member
Posts: 116
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: 24
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 506 times
Best Regards,
Ionut Bocanet

Post Reply