Fixed table header

[Segi]

I have a table that is inside of a tab control. the table contains many rows and I want to have the table header stay in a fixed position so that when you scroll down the table, the header does not disappear but the data in the table scrolls.

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]

Hi Segi, we have done this before just in a slightly different way. I will talk you through this:

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 
$&#40;".stickyTable"&#41;.wrapAll&#40; "<div>"&#41;;

// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"800px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

// Add the <thead> tag to the markup so that floatHead can work
$&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;

// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
$&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;

// Set the floating header table to a variable for use in its config
var $table = $&#40;'table.stickyTable'&#41;;

// Now call the plugin method, here I am using the scrollContainer config option too
$table.floatThead&#40;&#123;
    scrollContainer&#58; function&#40;$table&#41;&#123;
        return $table.closest&#40;'.cont'&#41;;
    &#125;
&#125;&#41;;

Now when you run your page the table should operate as you desire.

Please let me know if there are any problems or anything else I can help with.

Kind Regards,

Jordan

[Segi]

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> &#40;jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;45&#41;
    at j &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Object.fireWith &#91;as resolveWith&#93; &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Function.ready &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at HTMLDocument.I &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
&#40;anonymous&#41; @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;45
j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2

[jcoulson]

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> &#40;jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;45&#41;
    at j &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Object.fireWith &#91;as resolveWith&#93; &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Function.ready &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at HTMLDocument.I &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
&#40;anonymous&#41; @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;45
j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2

Do you have a recent version of jquery and jqueryui attached before the floatThead script?

Jordan

[Segi]

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:

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];

The error is:

Code: Select all

Uncaught TypeError: Cannot read property 'split' of undefined
    at HTMLDocument.<anonymous> &#40;jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;35&#41;
    at j &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Object.fireWith &#91;as resolveWith&#93; &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Function.ready &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at HTMLDocument.I &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
&#40;anonymous&#41; @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;35
j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2

[jcoulson]

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:

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0];

The error is:

Code: Select all

Uncaught TypeError: Cannot read property 'split' of undefined
    at HTMLDocument.<anonymous> &#40;jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;35&#41;
    at j &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Object.fireWith &#91;as resolveWith&#93; &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at Function.ready &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
    at HTMLDocument.I &#40;JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2&#41;
&#40;anonymous&#41; @ jQueryEventRegistration?pageId=HOME_PAGE&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+db…&#58;35
j @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
fireWith @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
ready @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2
I @ JQUERY.js?owner=Template&formCacheKey=Administration+-+%2FForms%2FADMIN+-+null+-+dbAdministration+-…&#58;2

Hi Segi,

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

[Segi]

Jordan,

I fixed it by changing the line

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0]; 

to

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1]; 

because the class referred to at index 0 was the wrong class. After changing index 0 to 1, it works as expected.

[jcoulson]

Jordan,

I fixed it by changing the line

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0]; 

to

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1]; 

because the class referred to at index 0 was the wrong class. After changing index 0 to 1, it works as expected.

Great news Segi.

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

[Segi]

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

[jcoulson]

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

That is to be expected. I would recommend putting it on the ready event of the table control if that is the case.

Regards,

Jordan

[Segi]

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 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
$&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"800px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

Everything up to this line works fine (That is, there's no visible layout issues)

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
$&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;

This line is what causes the problem:

Code: Select all

$(content).find('thead').append($(content).find('tr:eq(0)'));

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").each(function(index) {$(this).find('thead').append($(this).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

// 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');
    }
}); 

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 it

[jcoulson]

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 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
$&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"800px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

Everything up to this line works fine (That is, there's no visible layout issues)

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
$&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;

This line is what causes the problem:

Code: Select all

$(content).find('thead').append($(content).find('tr:eq(0)'));

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").each(function(index) {$(this).find('thead').append($(this).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

// 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');
    }
}); 

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 it

Hi Segi,

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

[Segi]

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:

Code: Select all

Customer name
    TABLE WITH CUSTOMER ORDERS BASED ON TABLE REPEATER

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.

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]

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:

Code: Select all

Customer name
    TABLE WITH CUSTOMER ORDERS BASED ON TABLE REPEATER

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.

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

Hi 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"}); 

Also when initialising the floatThead plugin try it as below with no scrollContainer option:

Code: Select all

$table.floatThead();  

If that doesn't work I will make myself a form here local and try to replicate this layout.

Kind Regards,

Jordan

[Segi]

Jordan,

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
$&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"800px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

so they were never getting executed in the first place.

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 
$&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;

Instead of moving each tables header to the thead, it copies all table headers to the thead

[jcoulson]

Jordan,

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
$&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

// Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
$&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"800px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

so they were never getting executed in the first place.

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 
$&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;

Instead of moving each tables header to the thead, it copies all table headers to the thead

Hi Segi,

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 
	$&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;; 
	
	// This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work 
	$&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;; 
	
	// Set the floating header table to a variable for use in its config 
	var $table = $&#40;'table.stickyTable'&#41;; 
	
	// Now call the plugin method
	$table.floatThead&#40;&#41;; 
&#125;&#41;; 

You may have to change the tr:eq part again depending on your layout type.

Any problems let me know.

Kind Regards,

Jordan

[Segi]

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 line

Code: Select all

$(content).find('thead').append($(content).find('tr:eq(0)')); 

since its in the context of $(".fixed_headers")

[jcoulson]

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 line

Code: Select all

$(content).find('thead').append($(content).find('tr:eq(0)')); 

since its in the context of $(".fixed_headers")

Hi Segi,

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

You appear to be using a different layout type compared to my testing, hence it doesn't not find the correct what we need.

Kind Regards,

Jordan

[Segi]

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

[jcoulson]

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

I have had it working here with multiple tables in a repeater.
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

[Segi]

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 changing

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0]; 

to

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1]; 

but that didn't fix it.

My page is structured like this:

Code: Select all

PAGE
  REPEATER
       REPEATER ROW

nothing unusual and the repeater isn't embedded inside of another control[/code]

[jcoulson]

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 changing

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[0]; 

to

Code: Select all

var ctidClass = $(content).find("[class^='CTID']").attr('class').split(' ')[1]; 

but that didn't fix it.

My page is structured like this:

Code: Select all

PAGE
  REPEATER
       REPEATER ROW

nothing unusual and the repeater isn't embedded inside of another control[/code]

I have the same layout exactly and all is working. as can be seen by my screenshot here:


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

[Segi]

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.

[jcoulson]

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.

Hi Segi,

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

[Segi]

Jordan,

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
   //$&#40;".stickyTable"&#41;.wrapAll&#40; "<div>"&#41;;

   // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
   // $&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"100px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

   // Add the <thead> tag to the markup so that floatHead can work
   $&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;
   
   // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
   $&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;
   
   // Set the floating header table to a variable for use in its config
   var $table = $&#40;'table.stickyTable'&#41;;
   
   // Now call the plugin method
   $table.floatThead&#40;&#41;; 
&#125;&#41;; 

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 down

[Segi]

Jordan,

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

after

Code: Select all

var content = $(".fixed_headers");

and also

Code: Select all

content = $(content).find(".eb-"+CTID+"-tableContent"); 

[jcoulson]

Jordan,

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
   //$&#40;".stickyTable"&#41;.wrapAll&#40; "<div>"&#41;;

   // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
   // $&#40;".cont"&#41;.css&#40;&#123;"height"&#58;"100px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

   // Add the <thead> tag to the markup so that floatHead can work
   $&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;
   
   // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
   $&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;
   
   // Set the floating header table to a variable for use in its config
   var $table = $&#40;'table.stickyTable'&#41;;
   
   // Now call the plugin method
   $table.floatThead&#40;&#41;; 
&#125;&#41;; 

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 down

Hi Segi,

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

[Segi]

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
          $&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

          var height=800; // default;

          if &#40;$&#40;content&#41;.height&#40;&#41;<height&#41; &#123;
               height=$&#40;content&#41;.height&#40;&#41; + 25;	
          &#125;
          
          // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
          $&#40;".cont"&#41;.css&#40;&#123;"height"&#58;height + "px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

          // Add the <thead> tag to the markup so that floatHead can work
          $&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;

          // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
          $&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;

          // Set the floating header table to a variable for use in its config
          var $table = $&#40;'table.stickyTable'&#41;;

          // Now call the plugin method, here I am using the scrollContainer config option too
          $table.floatThead&#40;&#123;
               scrollContainer&#58; function&#40;$table&#41;&#123;
               return $table.closest&#40;'.cont'&#41;;
               &#125;
          &#125;&#41;;
     &#125;,500&#41;;
&#125;

[jcoulson]

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
          $&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

          var height=800; // default;

          if &#40;$&#40;content&#41;.height&#40;&#41;<height&#41; &#123;
               height=$&#40;content&#41;.height&#40;&#41; + 25;	
          &#125;
          
          // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
          $&#40;".cont"&#41;.css&#40;&#123;"height"&#58;height + "px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;

          // Add the <thead> tag to the markup so that floatHead can work
          $&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;

          // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
          $&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;

          // Set the floating header table to a variable for use in its config
          var $table = $&#40;'table.stickyTable'&#41;;

          // Now call the plugin method, here I am using the scrollContainer config option too
          $table.floatThead&#40;&#123;
               scrollContainer&#58; function&#40;$table&#41;&#123;
               return $table.closest&#40;'.cont'&#41;;
               &#125;
          &#125;&#41;;
     &#125;,500&#41;;
&#125;

Hi Segi,

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

[Segi]

This updated version of my function can also conditionally handle repeaters (as long as isRepeater is true)

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
                    $&#40;".stickyTable"&#41;.wrapAll&#40;"<div>"&#41;;

                    var height=800; // default;

                    if &#40;$&#40;content&#41;.height&#40;&#41;<height&#41; &#123;
                         height=$&#40;content&#41;.height&#40;&#41; + 25;	
                    &#125;
               
                    // Here I fix the height of the table and make it vertically scrollable, not needed if using floatThead without scrollContainer option
                    $&#40;".cont"&#41;.css&#40;&#123;"height"&#58;height + "px","overflow-y"&#58;"auto","overflow-x"&#58;"hidden"&#125;&#41;;
               &#125;
               
               // Add the <thead> tag to the markup so that floatHead can work
               $&#40;content&#41;.prepend&#40;'<thead></thead>'&#41;;

               // This takes the first <tr> row and puts it inside the new<thead> element so that the plugin will work
               $&#40;content&#41;.find&#40;'thead'&#41;.append&#40;$&#40;content&#41;.find&#40;'tr&#58;eq&#40;0&#41;'&#41;&#41;;

               // Set the floating header table to a variable for use in its config
               var $table = $&#40;'table.stickyTable'&#41;;

               if &#40;isRepeater==false&#41; &#123;
                    // Now call the plugin method, here I am using the scrollContainer config option too
                    $table.floatThead&#40;&#123;
                         scrollContainer&#58; function&#40;$table&#41;&#123;
                         return $table.closest&#40;'.cont'&#41;;
                    &#125;&#125;&#41;;
               &#125; else &#123;
                    $table.floatThead&#40;&#41;;
               &#125;
          &#125;&#41;;
     &#125;,500&#41;;
&#125;