Loading rows into jsf datatable only on user request

Question

Problem statement:

I have used hx:dataTableEx to display database table records.

I'm binding Service data object(relational record list) to hx:dataTableEx.

Loading time is more due to number of records(fetch result gives more than 10000 records).

I have limited 50 rows per page and I used pagination(hx:pagerWeb) to view next set of records.

How to make datatable loads only first 50 records which are to be displayed initially rest of the rows are to be fetched only on user clicking next button.

Please help me to find the solution.

After trying the method suggested below, I have this problem.

When I click on commandlink with value 'A' datatable expands it's space on the screen(on page)but data is invisble. I don't know why datatable data is invisible.

Resulting screenshot:

<h:dataTable  id="table" width="100%" value="#{myDataModelHandler.activeDataModel}"  binding="#{myHtmlDataTableHandler.htmlDataTable }" var="row" rendered=" #{myDataModelHandler.selectedLetter !=null }">
<hx:columnEx id="columnEx1">
    <f:facet name="header">
        <h:outputText id="Column1Header" styleClass="outputText" value="Document Name">    </h:outputText>
    </f:facet>
    </hx:columnEx>
</h:dataTable>

I suspect that I have made error in binding the pagedlistdatamodel to the datatable component.

Please help me to troubleshoot this error.

Thank you.