Question

我想动态地在JSP表中显示数据库中的数据。我想使我的表可滚动，可排序（升序和降序），可搜索和可分页。

例如，见link;你会找到一个包含可排序列，搜索功能和分页的表。

我想实现类似于该数据表的东西。

JSP页面如下所示

  <html>       
  <body>
  <div class="container" style="overflow:scroll;
                  height:250px;width:100%;overflow:auto">
  <TABLE id="example" class="table table-striped">
  <thead>
  <TR valign=top class="header">
  <TH bgcolor="#008000">ATM Site No</TH>
  <TH bgcolor="#008000">ATM Location</TH>
  <TH bgcolor="#008000">LHO</TH>
  <TH bgcolor="#008000">Cash</TH>
  <TH bgcolor="#008000">Non Cash</TH>
  <TH bgcolor="#008000">Revenue</TH>
  <TH bgcolor="#008000">Up Time</TH>
  <TH bgcolor="#008000">Up Time Date</TH>
  </TR>
  </thead>
  <s:iterator  value="uptimeBeans">
  <tbody>
  <TR valign=top>
  <TD><s:property value="ATM_Site_No"/></TD>
  <TD><s:property value="ATM_Location"/></TD>
  <TD><s:property value="LHO"/></TD>
  <TD><s:property value="Cash"/></TD>
  <TD><s:property value="Non Cash"/></TD>
  <TD><s:property value="Revenue"/></TD>
  <TD><s:property value="Up Time"/></TD>
  <TD><s:property value="Up Time Date"/></TD>
  </TR>
  </tbody>
  </s:iterator>
  </TABLE>
  </div>
  </body>
  </html>

Answer 1

在添加jquery和datatable js之后，您只需要调用此脚本以使用datable： -

$(document).ready(function() {
$('#example').dataTable( {
    "scrollY": 200,
    "scrollX": true,
    "order": [[ 1, "desc" ]]

} );
} );

这里，1是列号。需要排序，您可以根据需要进行更改。

参考datatable intialization

datatable sorting datatable scrolling

Answer 2

Use this script for dynamic sorting in datatable.

$(document).ready(function() {
   $('#example').DataTable( {
      "order": [[ 3, "desc" ]]
   } );
} );

please refer this URL for dynamic sorting in datatable:
https://datatables.net/examples/basic_init/table_sorting.html

如何使我的动态JSP表可以按升序和降序滚动和排序？

2 个答案: