nansjames nansjames - 4 months ago 23
jQuery Question

jQuery Datatable with Struts 2

I am using jQuery Datatable to display a table from database and iterating using

s:iterator


<html>
<head>
<link href="css/forum.css" rel="stylesheet" type="text/css" />
<link href="css/media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
<link href="css/media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
<link href="css/media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="css/media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
$("#display").dataTable({
"bJQueryUI": true,
"iDisplayLength": 5,
"sPaginationType": "full_numbers",
});
});
</script>

</head>
<body>
<table id="display">
<thead>
<tr><th>Title</th></tr>
<tr><th>Desc</th></tr>
</thead>
<tbody>
<s:iterator value="travelBean" status="i">
<tr>
<td>
<s:url action="Display" var="DisplayLink">
<s:param name="title"><s:property value="title"/></s:param>
</s:url>
<a href="${DisplayLink}">
<s:property value="Desc"/></a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</body>
<html>


In the output
div
which will form above the table from query to show entries and below for first,previous and next button are not appearing if I put
tr
td
inside
s:iterator
and if I remove
tr
td
then the
div
s are appearing but no table entries available in the table. Am not sure what will be the issue?

Answer

The table can be loaded from the HTML datasource. You should try the basic configuration, then add features. Because you might have a jQuery version mismatch.

<html>
<head>   
    <link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
    <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function () {
          $("#display").dataTable();
       });
    </script>
</head>
<body>
   <table id="display">
         <thead>
             <tr>
               <th>Title</th>
               <th>Desc</th>
             </tr>
         </thead>
         <tfoot>
             <tr>
               <th>Title</th>
               <th>Desc</th>
             </tr>
         </tfoot>
         <tbody>
           <s:iterator  value="travelBean">
           <tr>
            <td><s:property value="title"/></td>
            <td>
               <s:url action="Display" var="DisplayLink">
                  <s:param name="title"><s:property value="title"/></s:param>
               </s:url>
               <a href="${DisplayLink}">
                  <s:property value="travelDesc"/>
               </a>
            </td>
           </tr>
           </s:iterator>
         </tbody>
   </table>
</body>
<html>

The travelBean you iterate should have a getter and TravelTable should have getters for properties.

Comments