function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jack daniel 16Jack daniel 16 

I need to create a scrollable data table in vf page using jquery.

Best Answer chosen by Jack daniel 16
Deepali KulshresthaDeepali Kulshrestha
Hi Jack,
Greetings to you!

I have created a vf page as per your requirement. Please use the following vf page code.
<apex:page standardController="Contact" recordSetVar="contacts">
    <apex:form >
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <style type="text/css">
            div.dataTables_wrapper {
            width: 800px;
            margin: 0 auto;
            }
        </style> 
        <apex:pageBlock title="Contacts List" id="contacts_list">
            
            <!-- Contacts List -->
            <apex:pageBlockTable id="Record_table" value="{! contacts }" var="ct" rows="20" width="100%">
                <apex:column value="{! ct.FirstName }"/>
                <apex:column value="{! ct.LastName }"/>
                <apex:column value="{! ct.Email }"/>
                <apex:column value="{! ct.Account.Name }"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
        <script type="text/javascript">
        j$ = jQuery.noConflict();
        j$(document).ready(function () {
            j$('[id$=Record_table]').DataTable( {
                "bSort" : false,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "scrollY": 200,
                "scrollX": true
            } );
        });  
        </script>    
        
    </apex:form>
</apex:page>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha