Got something cool to share with AppGini users? Feel free to post it here!
-
pbottcher
- AppGini Super Hero
- Posts: 1638
- Joined: 2018-04-01 10:12
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
Post
by Bertv » 2018-05-02 14:58
Thanks for sharing this. It looks great.
Bert
I am using Appgini 5.75
-
Jay Webb
- Veteran Member
- Posts: 80
- Joined: 2017-08-26 15:27
-
Contact:
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
- Posts: 327
- Joined: 2013-09-19 10:23
Post
by AhmedBR » 2018-05-07 20:21
Thanks for sharing. Works great
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
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
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
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 (116.09 KiB) Viewed 12885 times
- sshto2.jpg (208.77 KiB) Viewed 12885 times
-
fgazza
- Veteran Member
- Posts: 205
- Joined: 2019-04-30 17:37
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 (65.99 KiB) Viewed 12865 times
-
pbottcher
- AppGini Super Hero
- Posts: 1638
- Joined: 2018-04-01 10:12
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
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 (50.83 KiB) Viewed 12721 times
- Immagine 002.jpg (36.02 KiB) Viewed 12721 times
-
fgazza
- Veteran Member
- Posts: 205
- Joined: 2019-04-30 17:37
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
- Posts: 1638
- Joined: 2018-04-01 10:12
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
- Posts: 1638
- Joined: 2018-04-01 10:12
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
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
- Posts: 1638
- Joined: 2018-04-01 10:12
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
Post
by fgazza » 2019-07-18 09:01
it works like a charm!!! Thank You! Fabiano
-
Ionut Bocanet
- Posts: 28
- Joined: 2017-03-12 09:26
-
Contact:
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.
See picture for more details.
Thank you in advance
-
Attachments
-
- example.png (219.14 KiB) Viewed 11347 times
Best Regards,
Ionut Bocanet
-
pfrumkin
- Veteran Member
- Posts: 157
- Joined: 2020-02-18 17:58
- Location: Albuquerque, New Mexico USA
Post
by pfrumkin » 2020-07-20 18:32
Hi Pascal,
This is great
! 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: 258
- Joined: 2018-11-26 13:55
- Location: Washington State
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: 258
- Joined: 2018-11-26 13:55
- Location: Washington State
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
- Posts: 1638
- Joined: 2018-04-01 10:12
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
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
- Posts: 1638
- Joined: 2018-04-01 10:12
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
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
- Posts: 1638
- Joined: 2018-04-01 10:12
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.