p:datatable 从支持 bean 插入后滚动到底部

Question

我需要在将记录添加到列表后滚动数据表。我有一个数据表：

    <p:scrollPanel id="tablewindowscroll" mode="native">
      <p:dataTable  scrollable="true" emptyMessage="" id="tablewindowwindow" style="width: 100%; height: 100%" var="msg" value="#{dtBasicView.messages}" rowStyleClass="#{msg.direction eq 0 ? 'stylequery' : 'styleresponse'}" styleClass="borderless">



      </p:dataTable>
    </p:scrollPanel>

    <p:poll update=":j_id0:tablewindow" interval="2"/>

在按钮上单击我将记录添加到此列表（使用支持 bean 中的经典 List.add 方法）。如何在列表更新后强制数据表从支持 bean 滚动到最后一个元素？

我试过了：

function scrollToBottom() {
    $('.ui-datatable-scrollable-body').scrollTop(100000)
}

但它无法通过调用工作：

   RequestContext.getCurrentInstance().execute("scrollToBottom();");

并使用：

  <p:ajax update="myDataTable" oncomplete="scrollToBottom()"/>

我需要一个从 backing bean 返回到 List.add 的事件，但我知道这样的事件不存在

如何在列表修改后将数据表从后台bean滚动到底部？

致以最诚挚的问候和感谢！

Answer 1

您可以从参数为 table 的 bean 调用 javascript，并且要对项目进行 select 索引。所以如果你想 select 最后一项，你可以在两个参数中传递 table 大小。

   PrimeFaces.current().executeScript("scroll(" + table.size() + "," + tableIndex + ");");

   function scroll(sizeOfTable, index) {
   var bucketHt = $("#formID\:tableID .ui-datatable-scrollable-body").height();
   var scrollHt = $("#formID\:tableID .ui-datatable-scrollable- 
   body").prop("scrollHeight");

   var itemHt = parseInt(scrollHt) / parseInt(sizeOfTable);
   var noItemsInBucket = parseInt(bucketHt) / parseFloat(itemHt);

   var itemNo = parseInt(index) + 1;
   var targetBucket = parseInt(itemNo) / parseFloat(noItemsInBucket);
   var halfBucketHt = parseInt(bucketHt) / 2;

   var scrollPos = 
    (parseInt(bucketHt) * (parseFloat(targetBucket) - 1)) + parseFloat(halfBucketHt);

   var scrollPosInt = Math.round(parseFloat(scrollPos));
   $('#formID\:tableID .ui-datatable-scrollable- 
   body').animate({scrollTop:scrollPosInt});
   }

p:datatable 从支持 bean 插入后滚动到底部

p:datatable scroll bottom after insert from backing bean

jsf

primefaces