Fixed table header
Moderators: Jon, Steve, Ian, Dave
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Fixed table header
This is an example of what I want to accomplish: https://codepen.io/tjvantoll/pen/JEKIu
This code does not seem to work though with my table. I added the CSS to the web resources surrounded by <STYLE> brackets and assigned my table to the fixed_headers class but the table header still disappears when you scroll down.
I also tried this code on another form that has a table that is not contained inside of a tab and it didn't work either.
I am testing this out on the latest version of Google Chrome.
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
1. First of all you need to download the jQuery plugin floatThead zip from here.
2. Extract the zip folder and make sure it is placed with the shared folder on your server webapp.
3. Attach the jquery.floatThead.min.js script from the dist directory of the plugin folder to your page (or presentation template) by going to Web Resources > Client Scripts > + > External Script and browsing to it within your shared folder. If not being used already, a recent version of jQuery and jQueryUI should also be configured on your page.
4. Add the class fixed_headers in the HTML ELement Properties window to the root of your table control.
5. Open the HTML Element Properties window for the root page control. Add a class or id so that your event is registered. Then in the jQuery tab for event handlers select ready from the event dropdown, then in the code window paste the following:
Code: Select all
// fixed_headers is the class set on the table in the designer
var content = $(".fixed_headers");
// Get the class name that contains the control identifer
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
// We now need to extract the ID number from ctidClass. this is surrounded by hyphens
var start_pos = ctidClass.indexOf('-') + 1;
var end_pos = ctidClass.indexOf('-',start_pos);
// the CTID variable now holds the control identifier that is used in other table classes that we need to access
var CTID = ctidClass.substring(start_pos,end_pos)
// This finds the actual table within all the Ebase tables markup
content = $(content).find(".eb-"+CTID+"-tableContent");
// Add a class to it so you can point the plugin at it
$(content).addClass("stickyTable");
// This line is optional but allows you to make the table itself scrollable and not the whole page
// Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen
$(".stickyTable").wrapAll( "<div>");
// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$(".cont").css({"height":"800px","overflow-y":"auto","overflow-x":"hidden"});
// Add the <thead> tag to the markup so that floatHead can work
$(content).prepend('<thead></thead>');
// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$(content).find('thead').append($(content).find('tr:eq(0)'));
// Set the floating header table to a variable for use in its config
var $table = $('table.stickyTable');
// Now call the plugin method, here I am using the scrollContainer config option too
$table.floatThead({
scrollContainer: function($table){
return $table.closest('.cont');
}
});
Please let me know if there are any problems or anything else I can help with.
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Code: Select all
Uncaught TypeError: $table.floatThead is not a function
at HTMLDocument.<anonymous> (jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:45)
at j (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
at Object.fireWith [as resolveWith] (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
at Function.ready (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
at HTMLDocument.I (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
(anonymous) @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:45
j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Do you have a recent version of jquery and jqueryui attached before the floatThead script?Segi wrote:That doesn't work. Even after attaching the min.js I get this error in the developer console:
Code: Select all
Uncaught TypeError: $table.floatThead is not a function at HTMLDocument.<anonymous> (jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:45) at j (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) at Object.fireWith [as resolveWith] (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) at Function.ready (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) at HTMLDocument.I (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) (anonymous) @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:45 j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2 fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2 ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2 I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Update: I fixed that error by attaching the non compressed version of the script so now I don't get an error but the fixed header still doesn't work.
I am getting an error on the second line of your document read javascript code:
Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
Code: Select all
Uncaught TypeError: Cannot read property 'split' of undefined
at HTMLDocument.<anonymous> (jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:35)
at j (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
at Object.fireWith [as resolveWith] (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
at Function.ready (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
at HTMLDocument.I (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2)
(anonymous) @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:35
j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Yes I do Jquery 3.1.1 and jQuery UI 1.10.3
Update: I fixed that error by attaching the non compressed version of the script so now I don't get an error but the fixed header still doesn't work.
I am getting an error on the second line of your document read javascript code:
The error is:Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
Code: Select all
Uncaught TypeError: Cannot read property 'split' of undefined at HTMLDocument.<anonymous> (jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:35) at j (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) at Object.fireWith [as resolveWith] (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) at Function.ready (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) at HTMLDocument.I (JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2) (anonymous) @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…:35 j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2 fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2 ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2 I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…:2
Can you check that the fixed_headers class is set in the class box for the table control root and not the id box. I would also make sure that all the css you added previously in your first attempt is removed.
I also noticed one line of my code did not copy correctly.
$(".stickyTable").wrapAll("<div>");
After the div part in the brackets it should read:
class='cont' />
If you are still having problems after checking the class and changing the line indicated above then I am happy for you to email me some stuff so that I can help.
In the designer on the page you wish to make the table scroll, please click the View Source button and copy and paste all the text form that window that pops up and email it to: jordan.coulson@ebasetech.com
Thanks,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
I fixed it by changing the line
Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Great news Segi.Segi wrote:Jordan,
I fixed it by changing the line
toCode: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
because the class referred to at index 0 was the wrong class. After changing index 0 to 1, it works as expected.Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
I do believe the layout type you are using affects the nesting of it all so I am glad you were able to get it to work.
Any further problems feel free to ask.
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
That is to be expected. I would recommend putting it on the ready event of the table control if that is the case.Segi wrote:Jordan,
Yes I've noticed that too. I've also have some forms where the table is hidden until an certain action is taken so I have to move the code that would normally go in the page control ready event to a different control
Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
I'm not sure if you can help me with this but I'm having an issue with this code when it comes to repeater table controls. My page has a total of 11 tables that are displayed in a repeater. I want each table in the repeater have a fixed header. This code causes the table header for each table to have 11 table headers.
I left out the 2 lines of code that you said are optional because they mess things up
Code: Select all
// This line is optional but allows you to make the table itself scrollable and not the whole page
// Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen
$(".stickyTable").wrapAll("<div>");
// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$(".cont").css({"height":"800px","overflow-y":"auto","overflow-x":"hidden"});
Code: Select all
// fixed_headers is the class set on the table in the designer
var content = $(".fixed_headers");
// Get the class name that contains the control identifer
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
// We now need to extract the ID number from ctidClass. this is surrounded by hyphens
var start_pos = ctidClass.indexOf('-') + 1;
var end_pos = ctidClass.indexOf('-',start_pos);
// the CTID variable now holds the control identifier that is used in other table classes that we need to access
var CTID = ctidClass.substring(start_pos,end_pos)
// This finds the actual table within all the Ebase tables markup
content = $(content).find(".eb-"+CTID+"-tableContent");
// Add a class to it so you can point the plugin at it
$(content).addClass("stickyTable");
// Add the <thead> tag to the markup so that floatHead can work
$(content).prepend('<thead></thead>');
Code: Select all
$(content).find('thead').append($(content).find('tr:eq(0)'));
Code: Select all
$("content").each(function(index) {$(this).find('thead').append($(this).find('tr:eq(0)'));});
Code: Select all
// Set the floating header table to a variable for use in its config
var $table = $('table.stickyTable');
// Now call the plugin method, here I am using the scrollContainer config option too
$table.floatThead({
scrollContainer: function($table){
return $table.closest('.cont');
}
});
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan,
I'm not sure if you can help me with this but I'm having an issue with this code when it comes to repeater table controls. My page has a total of 11 tables that are displayed in a repeater. I want each table in the repeater have a fixed header. This code causes the table header for each table to have 11 table headers.
I left out the 2 lines of code that you said are optional because they mess things upEverything up to this line works fine (That is, there's no visible layout issues)Code: Select all
// This line is optional but allows you to make the table itself scrollable and not the whole page // Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen $(".stickyTable").wrapAll("<div>"); // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option $(".cont").css({"height":"800px","overflow-y":"auto","overflow-x":"hidden"});
This line is what causes the problem:Code: Select all
// fixed_headers is the class set on the table in the designer var content = $(".fixed_headers"); // Get the class name that contains the control identifer var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1]; // We now need to extract the ID number from ctidClass. this is surrounded by hyphens var start_pos = ctidClass.indexOf('-') + 1; var end_pos = ctidClass.indexOf('-',start_pos); // the CTID variable now holds the control identifier that is used in other table classes that we need to access var CTID = ctidClass.substring(start_pos,end_pos) // This finds the actual table within all the Ebase tables markup content = $(content).find(".eb-"+CTID+"-tableContent"); // Add a class to it so you can point the plugin at it $(content).addClass("stickyTable"); // Add the <thead> tag to the markup so that floatHead can work $(content).prepend('<thead></thead>');
I tried to fix this by looping through each class in content using jQuery's each function. So I changed the above line to:Code: Select all
$(content).find('thead').append($(content).find('tr:eq(0)'));
so each table's header will be move into the thead created in the previous step for that particular table and then used the rest of the jQuery code unmodified:Code: Select all
$("content").each(function(index) {$(this).find('thead').append($(this).find('tr:eq(0)'));});
This new way that uses each doesn't mess up the layout but it doesn't set the fixed headers accordingly. If you know how to fix it, I'd appreciate any useful advice on how to do itCode: Select all
// Set the floating header table to a variable for use in its config var $table = $('table.stickyTable'); // Now call the plugin method, here I am using the scrollContainer config option too $table.floatThead({ scrollContainer: function($table){ return $table.closest('.cont'); } });
I am having trouble visualising quite what you are trying to accomplish.
Would you please send me a screenshot of your designer for this form and a screenshot of the page running so I can work out what needs to change.
My email is: jordan.coulson@ebasetech.com
Many thanks,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
I can't send you actual screenshots since it contains sensitive info but I can describe to you what it looks like.
I have a table repeater based on customer orders. Each row is displayed like this:
Code: Select all
Customer name
TABLE WITH CUSTOMER ORDERS BASED ON TABLE REPEATER
Each table in the repeater has a table header of course and the table header is the same for all customer tables.
I want to have each table in the repeater have its own fixed header but as it is now, the jQuery code will causes each customers' table to have 11 table headers because the jQuery code moves the table to the div that it creates. I want to have each table have 1 header that is fixed.
Thanks,
Segi
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan,
I can't send you actual screenshots since it contains sensitive info but I can describe to you what it looks like.
I have a table repeater based on customer orders. Each row is displayed like this:
If I have 11 customers displayed on this page, there will be a total of 11 tables, 1 for each customer which lists that customers' orders.Code: Select all
Customer name TABLE WITH CUSTOMER ORDERS BASED ON TABLE REPEATER
Each table in the repeater has a table header of course and the table header is the same for all customer tables.
I want to have each table in the repeater have its own fixed header but as it is now, the jQuery code will causes each customers' table to have 11 table headers because the jQuery code moves the table to the div that it creates. I want to have each table have 1 header that is fixed.
Thanks,
Segi
Thanks for the explanation I understand now.
I think it is the plugin config that is the problem.
You can start by commenting out the below line:
Code: Select all
$(".cont").css({"height":"800px","overflow-y":"auto","overflow-x":"hidden"});
Code: Select all
$table.floatThead();
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
I have already commented out 2 lines of the code:
Code: Select all
// This line is optional but allows you to make the table itself scrollable and not the whole page
// Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen
$(".stickyTable").wrapAll("<div>");
// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$(".cont").css({"height":"800px","overflow-y":"auto","overflow-x":"hidden"});
The problem is with the line of code that moves the table header to the newly created thead tag that is appended to content.
Code: Select all
/ This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$(content).find('thead').append($(content).find('tr:eq(0)'));
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan,
I have already commented out 2 lines of the code:
so they were never getting executed in the first place.Code: Select all
// This line is optional but allows you to make the table itself scrollable and not the whole page // Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen $(".stickyTable").wrapAll("<div>"); // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option $(".cont").css({"height":"800px","overflow-y":"auto","overflow-x":"hidden"});
The problem is with the line of code that moves the table header to the newly created thead tag that is appended to content.
Instead of moving each tables header to the thead, it copies all table headers to the theadCode: Select all
/ This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work $(content).find('thead').append($(content).find('tr:eq(0)'));
I have worked this out now, you need to do the each loop on the fixed_headers class, as per my code below:
Code: Select all
$(".fixed_headers").each(function()
{
// fixed_headers is the class set on the table in the designer
var content = $(this);
// Get the class name that contains the control identifer
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
// We now need to extract the ID number from ctidClass. this is surrounded by hyphens
var start_pos = ctidClass.indexOf('-') + 1;
var end_pos = ctidClass.indexOf('-',start_pos);
// the CTID variable now holds the control identifier that is used in other table classes that we need to access
var CTID = ctidClass.substring(start_pos,end_pos);
// This finds the actual table within all the Ebase tables markup
content = $(content).find(".eb-"+CTID+"-tableContent");
// Add a class to it so you can point the plugin at it
$(content).addClass("stickyTable");
// Add the <thead> tag to the markup so that floatHead can work
$(content).prepend('<thead></thead>');
// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$(content).find('thead').append($(content).find('tr:eq(0)'));
// Set the floating header table to a variable for use in its config
var $table = $('table.stickyTable');
// Now call the plugin method
$table.floatThead();
});
Any problems let me know.
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
I ran that code on a page that uses a repeater and while it didn't mess up the layout, the table header did not become fixed. I'm not sure about what would need to be changed with the line
Code: Select all
$(content).find('thead').append($(content).find('tr:eq(0)'));
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan,
I ran that code on a page that uses a repeater and while it didn't mess up the layout, the table header did not become fixed. I'm not sure about what would need to be changed with the linesince its in the context of $(".fixed_headers")Code: Select all
$(content).find('thead').append($(content).find('tr:eq(0)'));
Sorry my mistake, I meant for you to change the line below as you did before:
Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
I have had it working here with multiple tables in a repeater.Segi wrote:Jordan,
Thanks but I guess this code doe not work with an Ebase repeater control. It doesn't create a fixed header for repeaters, only a web page with a single form
Have you put the fixed_headers class on the table in your repeater, this is where it should go and not on the repeater itself.
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Yes that's what I did. The jquery code doesn't mess up the layout any more but doesn't set a fixed table header.
I also tried changing
Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
My page is structured like this:
Code: Select all
PAGE
REPEATER
REPEATER ROW
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
I have the same layout exactly and all is working. as can be seen by my screenshot here:Segi wrote:Jordan,
Yes that's what I did. The jquery code doesn't mess up the layout any more but doesn't set a fixed table header.
I also tried changingtoCode: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];
but that didn't fix it.Code: Select all
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
My page is structured like this:
nothing unusual and the repeater isn't embedded inside of another control[/code]Code: Select all
PAGE REPEATER REPEATER ROW
In the screenshot below you can see my layout in the designer.
On the root of the page I have the below screenshot configured in the html element properties window.
Inside the ready event I have the below code:
At the root of my table control I have the class configured in the html element properties window as below:
Also worth noting is the layout types:
The page has no layout type assigned.
The repeater is set as a vertical box layout.
The repeater row is set as a vertical box layout.
Hopefully you should be able to make it work following a similar setup.
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Thank you for taking the time to make and post all of those screenshots.
Based on the screenshot of the table repeater, it doesn't look like each table with in the repeater has its own fixed header. When I apply this code to a form with a single table, it automatically adds a vertical scroll bar to that table.
I don't see a vertical scroll bar for each table in the screenshot that you sent.
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan
Thank you for taking the time to make and post all of those screenshots.
Based on the screenshot of the table repeater, it doesn't look like each table with in the repeater has its own fixed header. When I apply this code to a form with a single table, it automatically adds a vertical scroll bar to that table.
I don't see a vertical scroll bar for each table in the screenshot that you sent.
I didn't realise that was what you were after.
However I have now made it work as you wish, please see the below screenshot for the code that needs changing in the ready event. Adjust line 27 to your desired table height:
Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Thanks for the help. I had to tweak the code a little and this works fine:
Code: Select all
$(".fixed_headers").each(function()
{
// fixed_headers is the class set on the table in the designer
var content = $(this);
// Get the class name that contains the control identifer
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1];
// We now need to extract the ID number from ctidClass. this is surrounded by hyphens
var start_pos = ctidClass.indexOf('-') + 1;
var end_pos = ctidClass.indexOf('-',start_pos);
// the CTID variable now holds the control identifier that is used in other table classes that we need to access
var CTID = ctidClass.substring(start_pos,end_pos);
// This finds the actual table within all the Ebase tables markup
content = $(content).find(".eb-"+CTID+"-tableContent");
// Add a class to it so you can point the plugin at it
$(content).addClass("stickyTable");
// This line is optional but allows you to make the table itself scrollable and not the whole page
// Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen
//$(".stickyTable").wrapAll( "<div>");
// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
// $(".cont").css({"height":"100px","overflow-y":"auto","overflow-x":"hidden"});
// Add the <thead> tag to the markup so that floatHead can work
$(content).prepend('<thead></thead>');
// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$(content).find('thead').append($(content).find('tr:eq(0)'));
// Set the floating header table to a variable for use in its config
var $table = $('table.stickyTable');
// Now call the plugin method
$table.floatThead();
});
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
One more suggestion. It's a good idea to validate the element being manipulated before you try to manipulate it.
I added this validation
Code: Select all
if ($(content).length==0) {
// Add error handing here
return;
}
Code: Select all
var content = $(".fixed_headers");
Code: Select all
content = $(content).find(".eb-"+CTID+"-tableContent");
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan,
Thanks for the help. I had to tweak the code a little and this works fine:
So now when I scroll on a form with a repeater, any time that the current table gets to the top of the page, it stays fixed at the top of the page until I get to the next table. If the next table has more rows than what can be displayed on screen, the header for that particular table will stay fixed at the top of the screen as you scroll downCode: Select all
$(".fixed_headers").each(function() { // fixed_headers is the class set on the table in the designer var content = $(this); // Get the class name that contains the control identifer var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1]; // We now need to extract the ID number from ctidClass. this is surrounded by hyphens var start_pos = ctidClass.indexOf('-') + 1; var end_pos = ctidClass.indexOf('-',start_pos); // the CTID variable now holds the control identifier that is used in other table classes that we need to access var CTID = ctidClass.substring(start_pos,end_pos); // This finds the actual table within all the Ebase tables markup content = $(content).find(".eb-"+CTID+"-tableContent"); // Add a class to it so you can point the plugin at it $(content).addClass("stickyTable"); // This line is optional but allows you to make the table itself scrollable and not the whole page // Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen //$(".stickyTable").wrapAll( "<div>"); // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option // $(".cont").css({"height":"100px","overflow-y":"auto","overflow-x":"hidden"}); // Add the <thead> tag to the markup so that floatHead can work $(content).prepend('<thead></thead>'); // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work $(content).find('thead').append($(content).find('tr:eq(0)')); // Set the floating header table to a variable for use in its config var $table = $('table.stickyTable'); // Now call the plugin method $table.floatThead(); });
Please see my post above the one I have just quoted with the single screenshot. This does what you want. It requires you to change lines 24, 27, 40. This will make the tables of fixed height that you set on line 27 and make just the tables themselves scrollable once you have added the scrollcontainer configuration to the bottom method. Please confirm this is what you want?
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
it is working now and I made this logic into a shared function in a Client script called floatingTableHeadEvents.js.
Here is my solution with some extra validation. This is not the code that I use with repeaters since that logic is a little bit different.
Code: Select all
// Any tables that need to automatically have a fixed header when the page has finished loading needs to call setFloatingHead in this ready event
$(document).ready(function() {
setFloatingHead(".MYFIXEDHEADERTABLECLASS",1);
});
/* Needed when the table is in a tab control */
// Since Ebase doesn't write the HTML for a table until the tab that the table is in has been clicked on, we set the floating table header when the tab registers a click event
// I always assign a unique ID to the tab itself and assign a class to the table that is inside of that tab
$('body').on('click','#MANAGEUSERSETAB',function(){
setFloatingHead(".MANAGEUSERS",1);
});
function setFloatingHead(className,index) {
setTimeout(function(){
// fixed_headers is the class set on the table in the designer
var content = $(className);
if ( $(content).length==0) {
// Add error handing here
//alert("returning step 1");
return;
}
// Validation to prevent error
if ( $(content).find("[class^='CTID']").length==0) {
return;
}
// Get the class name that contains the control identifer
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[index];
// We now need to extract the ID number from ctidClass. this is surrounded by hyphens
var start_pos = ctidClass.indexOf('-') + 1;
var end_pos = ctidClass.indexOf('-',start_pos);
// the CTID variable now holds the control identifier that is used in other table classes that we need to access
var CTID = ctidClass.substring(start_pos,end_pos)
// This finds the actual table within all the Ebase tables markup
newContent = $(content).find(".eb-"+CTID+"-tableContent");
if ($(newContent).length==0) {
content = $(content).find(".eb-"+CTID+"-Override-tableContent");
if ( $(content).length==0) {
// Add error handing here
//alert("returning step 2");
return;
}
} else {
content=newContent;
}
// Prevents the floating header from being added more than once
if ($(content).hasClass("stickyTable") == true) {
return;
}
// Add a class to it so you can point the plugin at it
$(content).addClass("stickyTable");
// This line is optional but allows you to make the table itself scrollable and not the whole page
// Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen
$(".stickyTable").wrapAll("<div>");
var height=800; // default;
if ($(content).height()<height) {
height=$(content).height() + 25;
}
// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$(".cont").css({"height":height + "px","overflow-y":"auto","overflow-x":"hidden"});
// Add the <thead> tag to the markup so that floatHead can work
$(content).prepend('<thead></thead>');
// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$(content).find('thead').append($(content).find('tr:eq(0)'));
// Set the floating header table to a variable for use in its config
var $table = $('table.stickyTable');
// Now call the plugin method, here I am using the scrollContainer config option too
$table.floatThead({
scrollContainer: function($table){
return $table.closest('.cont');
}
});
},500);
}
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Hi Segi,Segi wrote:Jordan,
it is working now and I made this logic into a shared function in a Client script called floatingTableHeadEvents.js.
Here is my solution with some extra validation. This is not the code that I use with repeaters since that logic is a little bit different.Code: Select all
// Any tables that need to automatically have a fixed header when the page has finished loading needs to call setFloatingHead in this ready event $(document).ready(function() { setFloatingHead(".MYFIXEDHEADERTABLECLASS",1); }); /* Needed when the table is in a tab control */ // Since Ebase doesn't write the HTML for a table until the tab that the table is in has been clicked on, we set the floating table header when the tab registers a click event // I always assign a unique ID to the tab itself and assign a class to the table that is inside of that tab $('body').on('click','#MANAGEUSERSETAB',function(){ setFloatingHead(".MANAGEUSERS",1); }); function setFloatingHead(className,index) { setTimeout(function(){ // fixed_headers is the class set on the table in the designer var content = $(className); if ( $(content).length==0) { // Add error handing here //alert("returning step 1"); return; } // Validation to prevent error if ( $(content).find("[class^='CTID']").length==0) { return; } // Get the class name that contains the control identifer var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[index]; // We now need to extract the ID number from ctidClass. this is surrounded by hyphens var start_pos = ctidClass.indexOf('-') + 1; var end_pos = ctidClass.indexOf('-',start_pos); // the CTID variable now holds the control identifier that is used in other table classes that we need to access var CTID = ctidClass.substring(start_pos,end_pos) // This finds the actual table within all the Ebase tables markup newContent = $(content).find(".eb-"+CTID+"-tableContent"); if ($(newContent).length==0) { content = $(content).find(".eb-"+CTID+"-Override-tableContent"); if ( $(content).length==0) { // Add error handing here //alert("returning step 2"); return; } } else { content=newContent; } // Prevents the floating header from being added more than once if ($(content).hasClass("stickyTable") == true) { return; } // Add a class to it so you can point the plugin at it $(content).addClass("stickyTable"); // This line is optional but allows you to make the table itself scrollable and not the whole page // Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen $(".stickyTable").wrapAll("<div>"); var height=800; // default; if ($(content).height()<height) { height=$(content).height() + 25; } // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option $(".cont").css({"height":height + "px","overflow-y":"auto","overflow-x":"hidden"}); // Add the <thead> tag to the markup so that floatHead can work $(content).prepend('<thead></thead>'); // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work $(content).find('thead').append($(content).find('tr:eq(0)')); // Set the floating header table to a variable for use in its config var $table = $('table.stickyTable'); // Now call the plugin method, here I am using the scrollContainer config option too $table.floatThead({ scrollContainer: function($table){ return $table.closest('.cont'); } }); },500); }
Great to hear that you have it all working and have tidied my code up to a nice neat function. It is also worth noting for anyone else reading this thread that the forum is stripping out code from the below line:
$(".stickyTable").wrapAll("<div>");
After the div part in the brackets it should read:
class='cont' />
Kind Regards,
Jordan
-
- Ebase User
- Posts: 649
- Joined: Mon Dec 09, 2013 6:37 pm
Code: Select all
function setFloatingHead(className,index,isRepeater) {
isRepeater=(typeof isRepeater != 'undefined' && isRepeater != 'null' ? isRepeater : false);
setTimeout(function(){
$(className).each(function() {
// fixed_headers is the class set on the table in the designer
var content = $(this);
if ( $(content).length==0) {
// Add error handing here
//alert("returning step 1");
return;
}
// Validation to prevent error
if ( $(content).find("[class^='CTID']").length==0) {
return;
}
// Get the class name that contains the control identifer
var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[index];
// We now need to extract the ID number from ctidClass. this is surrounded by hyphens
var start_pos = ctidClass.indexOf('-') + 1;
var end_pos = ctidClass.indexOf('-',start_pos);
// the CTID variable now holds the control identifier that is used in other table classes that we need to access
var CTID = ctidClass.substring(start_pos,end_pos)
// This finds the actual table within all the Ebase tables markup
newContent = $(content).find(".eb-"+CTID+"-tableContent");
if ($(newContent).length==0) {
content = $(content).find(".eb-"+CTID+"-Override-tableContent");
if ( $(content).length==0) {
// Add error handing here
//alert("returning step 2");
return;
}
} else {
content=newContent;
}
// Prevents the floating header from being added more than once
if ($(content).hasClass("stickyTable") == true) {
return;
}
// Add a class to it so you can point the plugin at it
$(content).addClass("stickyTable");
if (isRepeater==false) {
// This line is optional but allows you to make the table itself scrollable and not the whole page
// Default action without a scrollContainer is to float the thead on page scroll and when the it reaches the top of the screen
$(".stickyTable").wrapAll("<div>");
var height=800; // default;
if ($(content).height()<height) {
height=$(content).height() + 25;
}
// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$(".cont").css({"height":height + "px","overflow-y":"auto","overflow-x":"hidden"});
}
// Add the <thead> tag to the markup so that floatHead can work
$(content).prepend('<thead></thead>');
// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$(content).find('thead').append($(content).find('tr:eq(0)'));
// Set the floating header table to a variable for use in its config
var $table = $('table.stickyTable');
if (isRepeater==false) {
// Now call the plugin method, here I am using the scrollContainer config option too
$table.floatThead({
scrollContainer: function($table){
return $table.closest('.cont');
}});
} else {
$table.floatThead();
}
});
},500);
}
Who is online
Users browsing this forum: No registered users and 8 guests