jqueryjspdatatablesstruts2struts-tags

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?

Solution

  • 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.