p:datatable scroll bottom after insert from backing bean

Question

I need to scroll datatable after adding a record to list. I have a datatable:

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

On button click im adding a record to this list (using classic List.add method in backing bean). How to force datatable to scroll to last element from backing bean after list update?

I tried:

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

But its not working by calling:

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

And to use:

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

I need an event relited to List.add from backing bean, but as im aware of such event does not exist

How to scroll a datatable to bottom from backing bean after list modification?

Best regards and thanks!

Does it work if you execute the javascript from the browser developer console after the update? Does it work without updatating/adding another record? And what is your PF version? I feel you have two questions in here... — Kukeltje
Hi, the javascript method is executed for sure. When im adding log.console to the scrollToBottom() method i can see messages in the console, but line " $('.ui-datatable-scrollable-body').scrollTop(100000)" is not scrolling the table. Um using primefaces 7. Javascript method is executed from backing bean using "PrimeFaces.current().executeScript("scrollToBottom();");". Its not working without adding record. Thanks for help! — Daveron
I tried $('.ui-datatable-scrollable-body').scrollTop(100000) in the online primefaces showcase primefaces.org/showcase/ui/data/datatable/scroll.xhtml and it works fine. you also have a scroll panel. Maybe that messes things up — Kukeltje

korbn korbn · Accepted Answer · 2020-05-15T13:32:27

You can call javascript from bean that has paramters of table size and index od item you want to be selected. So if you want to select last item you can just pass table size in both paramters.

   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 scroll bottom after insert from backing bean

1 Answers