[louisagung]

Found the solution here: http://sitesforprofit.com/responsive-tables-in-wordpress
I put this code in the child theme's CSS:

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}

and this code in the Footer Scripts section in Theme Settings:

<script>
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");

for (var i = 0; i < headers.length; i++) {
	headertext[i]=[];
	for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
	  var current = headrow;
	  headertext[i].push(current.textContent);
	  }
} 

for (var h = 0, tbody; tbody = tablebody[h]; h++) {
	for (var i = 0, row; row = tbody.rows[i]; i++) {
	  for (var j = 0, col; col = row.cells[j]; j++) {
	    col.setAttribute("data-th", headertext[h][j]);
	  } 
	}
}
</script>

Works neatly!

[louisagung]

Hi,

I just implemented the local installation as written in https://datatables.net/manual/installation. I put the DataTables HTML inclusion in my Executive Pro's Landing Page Template (page_landing.php) file, before the run Genesis loop. Nothing happened. I guess I missed something.

I uploaded the DataTables folder directly under public_html but I don't see any datatables.css or datatables.js in the DataTables folder. The Responsive folder is there in the extensions folder though.

Maybe someone has a step by step instruction?

[louisagung]

Hi Victor, where should I put the HTML for the DataTables? I'm using Genesis Executive Pro Theme. Should I put it in Genesis parent theme or in the Executive child theme? What is the best theme file to put it in?

[louisagung]

I see. I'll take a look, Victor. Thank you!

[louisagung]

Nevermind, I've found it. Turns out that I have to switch to single post to make the sidebar widgets appear.

[louisagung]

Thanks, Victor. I used the simple edit plugin and it works perfectly!

[louisagung]

Hi darrenbrettking,

thank you for the detailed suggestion. It works perfectly!

[Author]

Posts