Question

当我添加一条新记录（在默认可视区域之外）时，我有一个可滚动的dataTable，其中包含100多条记录，并且更新了dataTable从记录0加载的数据表，而我需要在前一个位置显示数据表视图。

我的数据表代码

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

更新数据表

的命令按钮（在对话框内）

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

目前我需要滚动回到第n条记录，看看添加了什么或做了任何更新等。在primeface数据表中是否有任何选项，或者我需要为此编写一个javascript。

Answer 1

我使用以下帖子

完成了上述操作

primeface datatable scrollbar position

datatable scroll

我的代码

脚本

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事件中

onstart="saveScrollPos()"

保存记录时CommandButton中的以下代码

oncomplete="autoScroll()"

PrimeFaces dataTable滚动条位于所需位置

1 个答案: