p：从支持 bean 插入后数据表滚动底部答案

【问题标题】：p:datatable scroll bottom after insert from backing beanp：从支持 bean 插入后数据表滚动底部
【发布时间】：2020-05-14 06:23:19
【问题描述】：

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

    <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()"/>

我需要一个从支持 bean 重新指向 List.add 的事件，但我知道这样的事件不存在

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

最好的问候和感谢！

【问题讨论】：

更新后从浏览器开发者控制台执行javascript是否有效？没有更新/添加另一条记录是否可以工作？你的PF版本是什么？我觉得你在这里有两个问题......
您好，javascript方法肯定执行了。当我将 log.console 添加到 scrollToBottom() 方法时，我可以在控制台中看到消息，但是“$('.ui-datatable-scrollable-body').scrollTop(100000)”行没有滚动表格。嗯，使用 primefaces 7. 使用“PrimeFaces.current().executeScript("scrollToBottom();");”从支持 bean 执行 Javascript 方法。如果不添加记录，它就无法工作。感谢您的帮助！
我在 primefaces 在线展示 primefaces.org/showcase/ui/data/datatable/scroll.xhtml 中尝试了 $('.ui-datatable-scrollable-body').scrollTop(100000)，效果很好。你也有一个滚动面板。也许这会把事情搞砸

标签： jsf primefaces

【解决方案1】：

您可以从具有表大小和要选择的索引 od 项参数的 bean 调用 javascript。因此，如果您想选择最后一项，您可以在两个参数中传递表格大小。

   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});
   }

【讨论】：