p:datatable从支持豆中插入后滚动到底部。

Question

在向列表中添加记录后，我需要滚动datatable。我有一个datatable，在点击按钮时，我向这个列表中添加了一条记录（在backing bean中使用经典的List.add方法）。

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

在点击按钮时，我向这个列表添加了一条记录（在backing bean中使用经典的List.add方法）。如何强制datatable在列表更新后从backing bean滚动到最后一个元素？

我试过了。

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

但它不工作，通过调用。

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

而要使用:

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

我需要一个事件从backing bean中重启到List.add，但据我所知，这样的事件并不存在。

如何在列表修改后，从后盾Bean中滚动一个datatable到底部？

最好的问候和感谢

Answer 1

你可以从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});
   }