[Plugin: WP-Table Reloaded] Fixed Header Row

Hi Alex,

thanks for your question.

This is done with the “FixedHeader” plugin for the DataTables JavaScript library (see https://datatables.net/extras/fixedheader/)

Here are some instructions that I had given someone else to get it to work. I don’t know if this is still working and the JavaScript file in the download might not be the latest version, so you might need to update it. Anyways, the code in the PHP file should get you started so that you can see how it works in principle.
The necessary code is here: https://tobias.baethge.com/download/plugins/additional/wp-table-reloaded-fixedheader.zip

– Unzip the file and place the included folder (with 2 files) in your wp-content/plugins/ folder.
– Then activate the new plugin “FixedHeaders (Extension for WP-Table Reloaded)” from within your WordPress admin area.
– Go to the WP-Table Reloaded “Plugin Options” and add the following CSS code to the existing one:

.FixedHeader_Cloned table {
 margin: 0!important;
}

– Now, for every table that you want fixed headers on, go to the corresponding post/page and extend the Shortcode of that table with one (or two) new parameters:
E.g.

[table id=1 /]

becomes

[table id=1 fixedheader=true /]

where the new parameter “fixedheader” will turn on the feature for the header row.

I hope that this still works.

Best wishes,
Tobias

Hi!
Now it doedn’t work.

Tobias, can you please explain how can I install this plugin now?

I found it here: https://www.datatables.net/extras/
but I don’t understand how to install it.

Thank you.

Hi,

you should install it with my description above. There should be no need to download extra files from the DataTables website.

Can you explain what exactly is not working or where you have trouble?

Regards,
Tobias

Sure.

The problem is, that nothing happens.
I am not sure about this:

– Go to the WP-Table Reloaded “Plugin Options” and add the following CSS code to the existing one:
.FixedHeader_Cloned table {
margin: 0!important;
}

Should I put it in Plugin Options/Custom CSS?

I tried, but there is no result(

Hi,

yes, you need to put that into the “Custom CSS” field, but only as one of the last steps.

Did you download and activate the Extension (a small WordPress plugin)? Did you add the Shortcode parameter?

Can you please post the URL to the page with your table?

Regards,
Tobias

Ok
Yes, i did all these steps in right order

https://aquastopspb.ru/?page_id=13

Take it like a demo page+table

Thank you for such fast answers

Hi,

ah ok, thanks for the link.

The code seems to have been included as necessary. The reason for the problem likely is that you are using “colspan” in the head row. This can sometimes cause trouble in the DataTables JavaScript library. And when that library does not work, FixedHeader can also not work.
Can you please try to remove all colspan/rowspan in the table?

Regards,
Tobias

Oh yeah!
It really works, thanks! But I need colspan in this page..otherwise there’s no sense in head row.

Also I noticed, that all browsers show this new error:

DataTables warning (table id = ‘wp-table-reloaded-id-1-no-1’): Requested unknown parameter ‘1’ from the data source for row 1

Hi,

as I said this is problem with the colspan. The DataTables JavaScript library (which offers the features like sorting, search, and Fixed Header), does always support colspan.
As this is an external JavaScript library, there’s nothing I can do about this. Sorry.

Regards,
Tobias

I see.

Thank you for help, Tobias.

Last question – I tried to delete all “colspan”, but the error, about I wrote above, is still there.

I found it, “rowspan” also a problem.

Thank you!

Hi,

yes, I should have been more precise here. Any cell combining (rowspan and colspan) can unfortunately trigger this error.

Best wishes,
Tobias

Hi Tobias,

I have the same error but unfortunately even with empty cells and no row- or colspan.
I wonder whether you can provide an option for completely disabling the DataTables JavaScript library though someone (like me) doesn’t need the fancy js features.

Best regards,
Michael

Hi Michael,

such an option does exist, actually…
Either disable it on a per-table basis by unchecking the “Use JavaScript library” option on the table’s “Edit” screen, or deactivate the library globally (for all tables) on the “Plugin Options” screen, by unchecking “Enable JavaScript library”.

Regards,
Tobias

Sorry,
I hadn’t seen the option before.
Thank you for your answer and the great plugin!

Regards,
Michael