Question

I have a scrollable dataTable with 100+ records when I add a new record (outside the default viewable area)and update the datatable the dataTable gets loaded from record 0, whereas I need datatable view at the previous position.

My dataTable code

<p:dataTable id="DataTable" value="#{dtMB.selectDataModel}" var="test" scrollable="TRUE" scrollHeight="500" styleClass="day-column2" selectionMode="single" >
 <ui:insert name="TableInsert" >
        <ui:include src="test.xhtml" />
 </ui:insert>   
</p:dataTable>

Command Button (inside a dialog) which updates the Datatable

<p:commandButton id="saveNew"  value="Save" type="submit" process="@parent" onsuccess="addNew.hide()"  action="#{dtMB.addNew()}"   update=":FORM:usrMsg :FORM:TABView:DataTable"/>

currently I need to scroll back to the n’th record to see what was added or do any updates etc.
Is there any option in primeface datatable, or I need to write a javascript for the same.

Answer 1

I did the above using the following post

primeface datatable scrollbar position

datatable scroll

my code

script

function saveScrollPos() {
var scrollPos = jQuery('#receptionFORM\\:receptionTV\\:scheduleDataTable .ui-datatable-scrollable-body').prop('scrollTop');
document.getElementById('receptionFORM:scrollPos').value = scrollPos;
}

function autoScroll() {
var scrollPos = document.getElementById('receptionFORM:scrollPos').value;
jQuery('#receptionFORM\\:receptionTV\\:scheduleDataTable .ui-datatable-scrollable-body').animate({scrollTop:scrollPos}, scrollPos); 
}

HiddenInput

<h:inputHidden id="scrollPos" />

In Ajax event of datatable row select

onstart="saveScrollPos()"

The below code in CommandButton while saving record

oncomplete="autoScroll()"