CODEWITHSUNDEEP
jsf-2primefaces
Rounak
Rounak

Reputation: 181

PrimeFaces datatable scrollbar position

How to set a scrollbar position of primefaces datatable from last to first?

Actually, I want see the information from bottom to top. Below is my code:

 <p:dataTable  var="c" value="#{MessagingUserBean.inboxDetails1}" scrollable="true" scrollHeight="517" liveScroll="true" emptyMessage="No Message Found"  scrollRows="8" scrollWidth="815" >

Upvotes: 0

Views: 10889

Answers (2)

Tankhenk
Tankhenk

Reputation: 634

Well you can try to not use a liveScroll because you then don't know the end of dataList. Try this and maybe this suit your needs. This will scrolldown to the bottom of your dataTable with a delay. 

<h:form prependId="false">
          <p:dataTable id="dataTable" var="c" value="#{MessagingUserBean.inboxDetails1}" scrollHeight="517" liveScroll="true" emptyMessage="No Message Found" scrollWidth="815" >

    //Your dataTable stuff
        </p:dataTable>
    </h:form>
    <script>
        //Get the scrollheight
        var s = jQuery('#dataTable .ui-datatable-scrollable-body').prop('scrollHeight');

        //Get total size of datatable
        var o = jQuery('#dataTable .ui-datatable-scrollable-body').prop('offsetHeight');

        //calculate how many times it can scrolldown to set your timer
        var t = Math.ceil(s/o);
        //Excute scrolldown animation (max scrolldown is  scrollHeight - offsetHeight)
        $('#dataTable .ui-datatable-scrollable-body').animate({scrollTop:s-0}, t*1000);     
    </script>

Upvotes: 1

user1441681
user1441681

Reputation:

You will need some javascript to do this.

var $scrollable = $(dataTableSelector).children('.ui-datatable-scrollable-body')[0];
$scrollable.scrollTop =  $scrollable.scrollHeight;

Where "dataTableSelector" is a selector for your primefaces table (a styleClass for example).

Of course, this assume that the last element in the list you're displaying is actually the first you want to show.

Upvotes: 1

Related Questions