Datatable with Lazyloading after update jumps to top

[markusg80]

I try to create a Datatable with lazy loading, livescrolling,filtering and sorting. Everything works fine. But when i try to update the table content via push socket the table jumps to the top scroll position. This is bad thing because when a user is scrolling down in the table and via push comes a update the scrollview jumps to top and the user has to rescroll down from where he is coming. When i try to update with the filter() method then the actual showing rows diappears from table. It is also strange tha for live scrolling i have to set the rows attribute. I think the livescrolling part of the datatable has o be reworked that only the actual rows are loaded to dom and load method of modell will be fired everytime when you scroll a page up or down. Ten for a update you have only to actualize the actual showing rows and all problems are solved.

[andyba]

First off, please pay more attention to the format of your posts. Yours was a little too much of a text wall to be easy to read.

You can solve this easily enough by storing the current scrollTop of the datatable div (where scrolling content is contained) before the update and restore it after the update.
Hint: JavaScript.

[markusg80]

Of course i've try this way but the setScrollPos() javascript method is called before the table update is occured. when after the update is complete and i call manually the setScrollPosition() method the scrollposition jumps to the right place. But in the the table there is no event when table update is completed. Here my code maybe i do something wrong.

Code: Select all

<h:form id="tools">
<!--remotecommand to start actualizing process when push message occurs-->
<p:remoteCommand name="sendSocketValue" actionListener="#{incidentDataBean.createMessage}" process="@(.ui-datatable-data)" partialSubmit="true" update=":tablegrowl,:table:incidents" onstart="saveScrollPosition();" oncomplete="setScrollPosition();" />
<!--socket to recieve primefaces push message-->
<p:socket id="pushsocket" channel="/incidentdbchange" onMessage="handleMessage"/>
<!--hidden input to submit json objcet from message to bean-->
<h:inputHidden id="socketinput" value="#{incidentDataBean.socketValue}"/>
<!--javascript to set jsonobject string to hidden field-->
<h:outputScript>
    function handleMessage(data) { 
        document.getElementById('tools:socketinput').value = data; sendSocketValue(); 
    }
</h:outputScript>
<h:outputscript>
    var scrollPosition;

    function saveScrollPosition() {
        scrollPosition = $(.ui-datatable-scrollable-body).scrollTop();
    }

    function setScrollPosition() {
        $(.ui-datatable-scrollable-body).scrollTop(scrollPosition);
    }
</h:outputscript>
</h:form>

<h:form id="table">
    <p:dataTable id="incidents" widgetVar="incidentTable" value="#{incidentDataBean.lazyIncidentModel}" var="row" liveScroll="true" scrollRows="15"   selection="#{incidentDataBean.selectedRow}" selectionMode="single" scrollable="true" scrollHeight="500" lazy="true" sortOrder="descending" rows="15" paginator="false">
    // Here are the columns
    </datatable>
</form>

[kukeltje]

Of course i've try this

Next time mention this upfront. saves us time (and frustration) and maybe you to due to our responses

[markusg80]

ok in my long text abouve i forget to say that. I will try to improve my posts in future.

But i dont write it because for me its no solution its only a workaround.

Now what i do wrong in my code? I like to make working at least this workaround

[markusg80]

There is no way to make it work. I've try to restore the scroll position after update but no effect. When then i run the restore javascript method from browser for some time i reach the right position. So i guess that with livescrolling enabled if the javascript method is called it can only jump to position already loaded into the table (inside the Range of the scrollRows. If i try to jump into position lower than then the actaul loaded scrollRows the jump goes only to the position where the scrollRows ends and loads the next rows with load method.

[pablo.fradua]

Old thread but I had the same issue on PF 12.
I fixed it following the proposed solution:

Code: Select all

<h:form id="myFormId">
    <p:datatable id="myTableId">
        <p:commandButton 
            update="myTableId"
            onstart="saveScrollPosition(window)"
            oncomplete="restoreScrollPosition(window)"
    </p:datatable>
</h:form>

Code: Select all

function saveScrollPosition(window){
    window.currentScrollPosition = $('#myFormId\\:myTableId div.ui-datatable-scrollable-body').scrollTop();
}

function restoreScrollPosition(window){
    $('#myFormId\\:myTableId  div.ui-datatable-scrollable-body').scrollTop(window.currentScrollPosition);
}

Not the most elegant way but it works