Hello,
I have tried using your very basic example of using ThemeRoller for themeing however I cannot seem to get everything to work. I have tried disabling my layout and outputting solely the table and still get the same result. The search box is not lined up and the pagination buttons are messed up. I have tried several different ThemeRoller themes including the one you show on your examples page:
http://datatables.net/release-datatables/examples/basic_init/themes.html
Here is a screen shot of my table and the source code is below also:
http://www.josephcrawford.com/pics/dt-themed.png
I have tried using your very basic example of using ThemeRoller for themeing however I cannot seem to get everything to work. I have tried disabling my layout and outputting solely the table and still get the same result. The search box is not lined up and the pagination buttons are messed up. I have tried several different ThemeRoller themes including the one you show on your examples page:
http://datatables.net/release-datatables/examples/basic_init/themes.html
Here is a screen shot of my table and the source code is below also:
http://www.josephcrawford.com/pics/dt-themed.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Administration Area</title>
<!-- EVEN TRIED REMOVING THIS THINKING IT WAS CONFLICTING, IT WAS NOT AN ISSUE -->
<link rel="stylesheet" type="text/css" href="/css/admin.css" />
<link type="text/css" href="/css/swanky-purse/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('#resourcelog').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "/admin/resourceajax/?resource=bucks"
} );
} );
$(function() {
$( "#btnBar" ).buttonset();
$("#btnBar [name='radio']").change(function() {
var val = $(this).attr('id');
window.location = '?resource='+val;
})
});
</script>
<div id="resourceContent">
<div id="btnBar">
<input type="radio" id="all" name="radio" /><label for="all">All</label>
<input type="radio" id="bucks" name="radio" checked="checked" /><label for="bucks">Bike Bucks</label>
<input type="radio" id="coins" name="radio" /><label for="coins">Coins</label>
<input type="radio" id="health" name="radio" /><label for="health">Health</label>
</div>
<div style="clear:both"></div>
<div id="dataTable">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="resourcelog" style="width:100%">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>