带有 Struts 2 的 jQuery 数据表

Question

我正在使用 jQuery Datatable 显示数据库中的表并使用<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>

        

在输出<div> ，如果我将<tr> <td>放在<s:iterator>并且如果我删除<tr> <td>然后<div>出现，但表中没有可用的表条目。 不知道会出现什么问题？

Answer 1

该表可以从 HTML 数据源加载。 您应该尝试基本配置，然后添加功能。 因为你可能有一个 jQuery 版本不匹配。

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

您迭代的travelBean应该有一个 getter，而TravelTable应该有属性的 getter。