Question

每个人的好日子。我有使用struts2 + hibernate构建的web应用程序。我试图在表示我的表时实现JQuery选项卡和数据表。以下是我的页面布局。以下是问题清单。

问题1：我已将数据表放在其中一个标签（div）“查看收入”中。但数据表正在填充div区域。我希望在标签区域显示数据表（在打击图像中标记为红色）。

问题2：我试图通过减小表的大小来解决上述问题，但没有运气。有人可以告诉我如何减小表的大小。我试过这样但没有运气。

<table class="display IncomeTable" cellspacing="0" width="600px">

问题3：数据表的搜索操作无效。我是数据表的新手，所以我不确定如果我需要在jquery或Java中添加任何额外的逻辑来获得此功能？如果是，那么有人可以给我一个暗示来实现这个目标。

JSP代码：

 <div id="ViewIncome"> // tab
    <table class="display IncomeTable" cellspacing="0" width="600px">
        <thead>
            <tr>
                <th>Description</th>
                <th>Category</th>
                <th>Payee</th>
                <th>Date</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>         
        </tbody>
    </table>
</div>

JQuery Code ::

  $(".IncomeTable").dataTable({
      "searching": true,
      "aaSorting":[[0, "desc"]],
      "sSearch": "Search",
    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "sPaginationType" : "full_numbers",
    "bProcessing" : true,
    "bServerSide" : true,
    "sAjaxSource" : "refreshIncomeData",
    "bJQueryUI" : true,
    "aoColumns": [
         {"mData":"description"},
         {"mData":"catergory.userCodeName"},
         {"mData":"payee.payeeName"},
         {"mData":"transactionDate"},
         {"mData":"amount"}
                  ]
  } );

struts.xml中：

<action name="refreshIncomeData" class="com.hibernate.action.DataTableIncomeAction" method="incomeExecute">
        <result type="json"></result>
</action>

Answer 1

我能够解决1和2问题。这是我更新的代码。我刚把它放在一个特定宽度的新div中。

更新了HTML代码：

 <div id="incomesViewTab">
    <div style="width:600px">
        <table class="IncomeTable" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Description</th>
                <th>Category</th>
                <th>Payee</th>
                <th>Date</th>
                <th>Amount</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
  </div>

JQuery代码：

$(".IncomeTable").dataTable({
    "paging":true,
    "searching": true,
    "bProcessing" : false,
    "bServerSide" : true,
    "bJQueryUI" : true,
    "info":true,
    "bAutoWidth": false,
    "aLengthMenu": [[10, 25], [10, 25]],
    "sPaginationType" : "full_numbers",
    "sAjaxSource" : "refreshIncomeData",
    "aoColumns": [
         {"mData":"description","bSearchable": true,"bSortable": true},
         {"mData":"catergory.userCodeName","bSearchable": false,"bSortable": false},
         {"mData":"payee.payeeName","bSearchable": false,"bSortable": false},
         {"mData":"transactionDate","bSearchable": false,"bSortable": false},
         {"mData":"amount","sWidth":"30px","bSearchable": false,"bSortable": false}]

});

选项卡中的数据表视图：

如果有人需要更多信息，请告诉我。

注意：问题3仍未解决。任何意见或建议都非常感谢。

struts2中的DataTable宽度问题+ DataTable搜索操作

1 个答案: