datatables inside tab with a theme

datatables inside tab with a theme

Hi,

I have a problem using a jquery datatable inside a tab, here is what I did  :


  1.  <link rel="stylesheet" href="css/jquery-ui-1.10.4.css">
  2.   <link rel="stylesheet" href="css/jquery-ui-Redmond.css">
  3.   <script src="js/jquery-1.10.2.js"></script>
  4.   <script src="js/jquery-ui-Redmond.js"></script>
  5.   <script src="js/jquery.cookie.js"></script>
  6.    
  7.   <script>
  8.   $(function() {
  9.     $("#tabs").tabs({ 
  10.     activate: function (e, ui) { 
  11.         $.cookie('selected-tab', ui.newTab.index(), { path: '/' }); 
  12.     }, 
  13.     active: $.cookie('selected-tab')             
  14. });
  15.   });
  16.   </script>
  17. <div id="tabs">
  18.   <ul>
  19.     <li><a href="/Grouping/listSAIAdminsAgency.do">SAI Admins</a></li>
  20.     <li><a href="/Grouping/listSAIAdminsIFenv.do">Environments</a></li>
  21.     <li><a href="/Grouping/listSAIAdminsIFtype.do">Transfer Types</a></li>
  22.   </ul>
  23. </div>

 listSAIAdminsAgency.do is a server side action that forward to a jsp file  called : listSAIAdmins.jsp :


  1. <H1><bean:message key="tablecaption.adminList" /></H1>
  2. <div id="saiAdminList" > 
  3.     <table id="saiAdminListTable" class="display" width="90%" border="0" > 
  4.         <thead>
  5.             <tr>
  6.                 <th><bean:message key="label.name" /></th>
  7.                 <th><bean:message key="label.emailAddress" /></th>                
  8.             </tr>
  9.         </thead>
  10.         <tbody>
  11.             <logic:iterate id="admin" name="adminList">
  12.                 <tr>
  13.                     <td><bean:write name="admin" property="fName"/> <bean:write name="admin" property="lName"/></td>
  14.                     <td><bean:write name="admin" property="email"/></td>                    
  15.                 </tr>
  16.             </logic:iterate> 
  17.        </tbody>
  18.     </table>
  19. </div>
  20. <script type="text/javascript" src="js/enhance.js"></script>
  21. <script type="text/javascript">
  22.     enhance({
  23.         loadScripts: [
  24.             'js/jquery-1.10.2.js',
  25.             'js/jquery.dataTables -1.10.3.js',
  26.             'js/onload.listSAIAdmins.js',
  27.             'js/jquery.cookie.js',
  28.             'js/loadhelp.js'
  29.         ],
  30.         loadStyles: [
  31.             'css/jquery-ui-1.10.4.css',
  32.             'css/jquery.dataTables -1.10.3.css',
  33.             'css/jquery-ui-Redmond.css'
  34.         ]
  35.     });
  36. </script>



and this is the result :




Thanks, your help is appreciated.