如何使动态JSP表按升序和降序可滚动和排序?

How can I make my dynamic JSP table scrollable and sortable in ascending and descending order?

本文关键字：降序 排序 滚动 升序 动态 何使 JSP      更新时间：2023-09-26

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

请看这个链接的例子;您将发现一个具有可排序列、搜索功能和分页的表。

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

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>

你只需要调用这个脚本在添加jquery和datatable js后使用datatable:-

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

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

引用数据表初始化

datatable排序datatable滚动

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
相关文章：