datatables inside tab with a theme
Hi,
I have a problem using a jquery datatable inside a tab, here is what I did :
- <link rel="stylesheet" href="css/jquery-ui-1.10.4.css">
- <link rel="stylesheet" href="css/jquery-ui-Redmond.css">
- <script src="js/jquery-1.10.2.js"></script>
- <script src="js/jquery-ui-Redmond.js"></script>
- <script src="js/jquery.cookie.js"></script>
-
- <script>
- $(function() {
- $("#tabs").tabs({
- activate: function (e, ui) {
- $.cookie('selected-tab', ui.newTab.index(), { path: '/' });
- },
- active: $.cookie('selected-tab')
- });
- });
- </script>
- <div id="tabs">
- <ul>
- <li><a href="/Grouping/listSAIAdminsAgency.do">SAI Admins</a></li>
- <li><a href="/Grouping/listSAIAdminsIFenv.do">Environments</a></li>
- <li><a href="/Grouping/listSAIAdminsIFtype.do">Transfer Types</a></li>
- </ul>
- </div>
listSAIAdminsAgency.do is a server side action that forward to a jsp file called : listSAIAdmins.jsp :
- <H1><bean:message key="tablecaption.adminList" /></H1>
- <div id="saiAdminList" >
- <table id="saiAdminListTable" class="display" width="90%" border="0" >
- <thead>
- <tr>
- <th><bean:message key="label.name" /></th>
- <th><bean:message key="label.emailAddress" /></th>
- </tr>
- </thead>
- <tbody>
- <logic:iterate id="admin" name="adminList">
- <tr>
- <td><bean:write name="admin" property="fName"/> <bean:write name="admin" property="lName"/></td>
- <td><bean:write name="admin" property="email"/></td>
- </tr>
- </logic:iterate>
- </tbody>
- </table>
- </div>
- <script type="text/javascript" src="js/enhance.js"></script>
- <script type="text/javascript">
- enhance({
- loadScripts: [
- 'js/jquery-1.10.2.js',
- 'js/jquery.dataTables -1.10.3.js',
- 'js/onload.listSAIAdmins.js',
- 'js/jquery.cookie.js',
- 'js/loadhelp.js'
- ],
- loadStyles: [
- 'css/jquery-ui-1.10.4.css',
- 'css/jquery.dataTables -1.10.3.css',
- 'css/jquery-ui-Redmond.css'
- ]
- });
- </script>
-
and this is the result :
Thanks, your help is appreciated.