如何计算HTML table中可见行的数量？

Question

我打算在 PrimeFaces (5.2) 中显示一个（只读，无过滤，无延迟加载）table，其中 table 应该一直向下延伸到如果行数不足，页脚 "empty rows"。页脚有一个固定的位置，因此如果行太多，table 会得到一个滚动条。似乎获得空行的标准解决方案是 return "fake rows" 以及结果。但是我不知道有多少要return，因为服务器不知道客户端能看到多少行，所以我return多了才可以合理看到（100）。然后我的计划是通过检查它们的 "visibility"，用 JavaScript 删除不需要的虚拟行，但事实证明这是一项不可能完成的任务。到目前为止，我还没有看到任何检查可见性的方法。我的 table 定义如下：

<p:dataTable id="tableId" var="orderView" value="#{orderTable.getPaddedOrderViews(100)}" 
          emptyMessage="EMPTY" scrollable="true" scrollHeight="550"
          resizableColumns="true" resizeMode="fit">
    ...

(getPaddedOrderViews(100) 应该 return 至少 100 行，如果需要用虚拟行填充）

并且以下代码应该找到 visible/invisible 行（因此我可以更改它以稍后删除不可见的虚拟行）：

      function isVisible1(ele) {
          if (ele !== null &&
              ele !== undefined &&
              ele.clientWidth !== 0 &&
              ele.clientHeight !== 0) {
              var style = window.getComputedStyle(ele,null);
              return style !== null &&
                  style !== undefined &&
                  style.opacity !== 0 &&
                  style.visibility !== 'hidden' &&
                  style.display !== 'none';
          }
          return false;
      }
      function isVisible2(ele) {
          return ele !== null &&
              ele !== undefined &&
              ele.clientWidth !== 0 &&
              ele.clientHeight !== 0 &&
              ele.style !== null &&
              ele.style !== undefined &&
              ele.style.opacity !== 0 &&
              ele.style.visibility !== 'hidden' &&
              ele.style.display !== 'none';
      }
      function isVisible3(ele) {
          return ele.offsetWidth > 0 || ele.offsetHeight > 0;
      }
      function countVisibleRows() {
          var count = 0;
          var result1 = 0;
          var result2 = 0;
          var result3 = 0;
          var r;
          for (r in document.getElementById("tableId_data").rows) {
              count++;
              /*
              FAILS BECAUSE window.getComputedStyle(ele,null) says
              argument 1 is not an object
              if (isVisible1(r)) {
                  result1++;
              }*/
              if (isVisible2(r)) {
                  result2++;
              }
              if (isVisible3(r)) {
                  result3++;
              }
          }
          return [count,result1,result2,result3];
      }

        jQuery(document).ready(function () {
            jQuery(document).ready(function () {
                // twice in document.ready to execute after Primefaces callbacks
                try {
                    alert("ROWS: "+countVisibleRows());
                }
                catch(err) {
                    alert(err.message);
                }
            });
        });

但它显示 "ROWS: [103,0,0,0]" table，我可以看到大约 22（非 empty/dummy）行（我希望得到的数字），还有更多隐藏。有些是我的虚拟行，但在这种情况下我看不到它们。 103 证明（恕我直言）我正在正确获取行。

isVisible1(ele) 在调用 window.getComputedStyle(ele,null) 时失败。 isVisible2(ele) 始终 returns false 因为没有行具有样式属性，并且 isVisible3(ele) 也始终 returns false.

那么，为什么这些行没有任何 'style'，如果没有这个 'style'，我如何判断它们是否可见？

许多 questions/solutions 关于计算可见行数，其中仅 "filtered" tables，但这不适用于我的情况。

如果可以通过某种方式从 table 本身提取可见行数，而不是检查行，那也可以解决我的问题。

我根据 this 问题找出如何检查可见性。

Answer 1

如果我理解正确的话，你想删除溢出的行。

由于您使用的是 jQuery 可以通过比较行的偏移量与容器底部的偏移量来轻松地完成此操作

var $cont = $('#container')
var contBottom = $cont.height() + $cont.offset().top;

$('tr').filter(function () {
    var $row = $(this),
        top = $row.offset().top,
        ht = $row.height();        
    return (top + ht) > contBottom;
}).remove()

DEMO

如何计算HTML table中可见行的数量？

How to count the number of visible rows in an HTML table?

html

javascript

primefaces

jsf-2

如何计算HTML table中*可见*行的数量？

How to count the number of *visible* rows in an HTML table?

html

javascript

primefaces

jsf-2

如何计算HTML table中可见行的数量？

How to count the number of visible rows in an HTML table?