function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Abhishek Saxena 106Abhishek Saxena 106 

How to implement bootstrap datatable and date picker in a single visual force page?

suryansh guptasuryansh gupta
<apex:page standardController="Contact">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
</body>
</apex:page>
Ajay K DubediAjay K Dubedi
Hi Abhishek,

You have to load the bootstrap and JQuery Library into your VF page.
Try the bellow code for dataTable and datePicker - 
<apex:page showHeader="false" sidebar="false" standardController="Contact" recordSetVar="con">
    <html>
        <head>
            <apex:includeScript value="{!URLFOR($Resource.JQueryMinJs)}"/>
            <apex:includeScript value="{!URLFOR($Resource.JQueryDataTableFile)}" />
            <apex:stylesheet value="{!URLFOR($Resource.bootstrap)}"/>
            <apex:stylesheet value="{!URLFOR($Resource.CssForDataTable)}"/>
            <apex:includeScript value="{!URLFOR($Resource.dataTableJQUI)}"/>
            <apex:includeScript value="{!URLFOR($Resource.JQueryDataTable)}"/>
            <script>
            $( function() {
                $( "#datepicker" ).datepicker(); // JQuery Method
            } );
            </script>
         </head>
        <body >
            <table id="example" >
                <thead>
                    <tr>
                        <th>AccountName</th>
                        <th>Email</th>
                        <th>Phone</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:repeat value="{!con}" var="cn">
                        
                        <tr>
                            <td>{!cn.LastName}</td>
                            <td>{!cn.Email}</td>
                            <td>{!cn.Phone}</td>
                        </tr>
                    </apex:repeat>
                </tbody>
            </table>
            <p>Date: <input type="text" id="datepicker"></p>
        </body>
    </html>
</apex:page>
I suggest you load all necessary Library into a static resource.

I hope you find some basic idea for your page. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi