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
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 (116.09 KiB) Viewed 12463 times
- 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 (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 (50.83 KiB) Viewed 12299 times
- 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
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.
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
! 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;