Geek asks and answers

Scroll the PrimeTaces data bar to the desired location

I have a scrollable dataTable with 100+ records when I add a new record (outside the default scope) and update the data that the dataTable is loading from record 0, whereas I need to have the data view in 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 the dialog) that 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 nth record to see what has been added or any updates, etc. Is there any option in the primary datatable, or do I need to write javascript for the same.

+5
source share
1 answer

I did this using the following entry

current scroll position in primary format

datatable scroll

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

Ajax datatable

onstart="saveScrollPos()"

CommandButton

oncomplete="autoScroll()"
+7

More articles:


All Articles