Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 2, 2015 at 3:45 pm #497202
    markwilliams

    I’ve created a custom page template to load an excel file and am using DataTables to apply some sorting features to that table within my WordPress instance.

    This may not be the right place to ask this question, but I haven’t found a solution anywhere else.

    The table is working fine, except that the fixedHeader option is not working and I’m curious if the fixed header of the enfold theme could possibly be interfering with a table from fixing a component on the page. 

    $(document).ready(function () { //http://www.datatables.net/manual/installation
	$('#overstock').DataTable( {
		"paging": false,
		"order": [[1,"asc"]],
		"responsive": true,
		fixedHeader: {
			header: true,
			footer: true,
		}
	});
});
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,fh-3.0.0,kt-2.0.0,r-1.0.7,se-1.0.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,fh-3.0.0,kt-2.0.0,r-1.0.7,se-1.0.1/datatables.min.js"></script>

    The first 3 options are honored, but the fixedHeader option is ignored.

    (Page link in private content)

    Any ideas?

    Thanks,
    Mark

    • This topic was modified 9 years, 3 months ago by markwilliams. Reason: Fixed some spacing in the code section
    September 3, 2015 at 7:09 am #497501
    Ismael

    Hi markwilliams!

    Thank you for using Enfold.

    I’m sorry but what do you mean by “fixedHeader”? I checked the site and the header is fixed when you scroll down.

    Cheers!
    Ismael

    September 3, 2015 at 1:59 pm #497627
    markwilliams

    Sorry for the confusion.

    There are two headers in play on that page.
    1. The header of the page itself with the logo and menus which is fixed and working properly.
    2. The first line of the table should also be fixed and stay at the top of the page when you scroll down. That’s the part that I can’t seem to get to work properly.

    I wasn’t sure if the code that causes the menu header to stick was preventing the code in the table from fixing the top row of grid.

    September 4, 2015 at 8:35 am #498132
    Ismael

    Hi!

    You can load the table in an iframe then set the thead container of the table to fixed position. Or try to add this in the Quick CSS field:

    #overstock > thead {
    position: fixed;
    top: 310px;
    z-index: 10000;
}

    Might need a few adjustments for mobile devices.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.