Salesforce Visualforce page using Jquery data table and freezing first column - not working!!
Salesforce Visualforce page using Jquery data table and freezing first column - not working!!
aim4stars
Posts: 1Questions: 1Answers: 0
0
down vote
favorite
I'm using jquery datatable plugin in my visualforce page. I need the first column to be freezed and there should be a horizontal scroller for the rest of the columns. I've used it on static table and it works fine.. but with my table .. it just shows static table with rows and columns filled with data... there is no scroll bar around the table.. There is only one scroll bar for the entire page if there is a lot of data to scroll horizontally/vertically.. I don't need the scroll bar for the entire page.. but just for the table.. I've been just doing this all day with no luck. Please guide me.
Here is my visual force page:
<apex:page sidebar="false" controller="MarkAttendance">
<!--All JS Libraries and CSS required for this example-->
<apex:includeScript value="https://code.jquery.com/jquery-1.11.1.min.js"/>
<apex:includeScript value="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"/>
<apex:includeScript value="https://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"/>
<apex:stylesheet value="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"/>
<apex:stylesheet value="https://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css"/>
<apex:form>
<html>
<head>
<script type="text/javascript">
function SelectResourceJS(){
SelectResourceAF();
}
var table;
$(document).ready( initializeDataTable());
function initializeDataTable(){
table = $('#accTable').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
} );
new $.fn.dataTable.FixedColumns( table, {
leftColumns: 1
} );
}
</script>
</head>
<body>
<apex:outputpanel id="scripts">
<script>
initializeDataTable();
</script>
</apex:outputpanel>
<apex:actionfunction name="SelectResourceAF" action="{!selectResource}" status="loadStatus" rerender="Table"/>
<apex:outputpanel id="ResourceListPanel" rendered="{!showDropDown}" title="Resource">
<apex:outputText value="Resource "> </apex:outputText>
<apex:selectList value="{!selectedResource}" multiselect="false" size="1" onchange="SelectResourceJS()">
<apex:selectOptions value="{!resourceOptions}" />
<!-- <apex:actionSupport event="onchange" reRender="theform" action="{!selectResource}"/> -->
</apex:selectList>
</apex:outputpanel>
<apex:outputPanel id="Table">
<apex:outputPanel id="AttendanceTable" rendered="{!showTable}" >
<table id="accTable">
<thead>
<tr>
<th>
<span>
Candidate
</span>
</th>
<apex:repeat value="{!sessionList}" var="s" >
<th>
<span>
{!s.name}
<br/>
{!s.sessionType}
<br/>
<apex:outputText value="{0,date,MM'/'dd}">
<apex:param value="{!s.day}" />
</apex:outputText>
</span>
</th>
</apex:repeat>
</tr>
</thead>
<tbody>
<!-- All contact names -->
<apex:repeat value="{!currentContacts}" var="c">
<apex:variable var="count" value="{!0}"/>
<tr>
<td>
<span>
{!c.individual.name}
</span>
</td>
<!-- Yes/No picklists -->
<apex:repeat value="{!c.attendances}" var="a">
<apex:variable var="count" value="{!count + 1}" />
<td>
<span>
<apex:inputField value="{!a.Attended2__c}" />
</span>
</td>
</apex:repeat>
</tr>
</apex:repeat>
<tr>
<th>
<span>
<apex:outputLabel value="Prep Time(minutes)" rendered="{!DisplayNewField}"/><br/><br/>
<apex:outputLabel value="Actual Time(minutes)" rendered="{!DisplayNewField}"/><br/><br/>
<apex:outputLabel value="Post Time(minutes)" rendered="{!DisplayNewField}"/>
</span>
</th>
<apex:repeat value="{!NewFieldWrapperList}" var="n">
<td>
<span>
<apex:inputText value="{!n.PrepTime}" rendered="{!DisplayNewField}"/><br/><br/>
<apex:inputText value="{!n.ActualTime}" rendered="{!DisplayNewField}"/><br/><br/>
<apex:inputText value="{!n.PostTime}" rendered="{!DisplayNewField}"/>
<!--<apex:outputLabel value="{!n.SessionName}" />
<br/>
<apex:outputText value="{0,date,MM'/'dd}">
<apex:param value="{!n.day}" />
</apex:outputText>-->
</span>
</td>
</apex:repeat>
</tr>
</tbody>
</table>
<!--<table>
<apex:repeat >
<td style="width:200px;height:30px;"/>
<span style="position:relative;left:20px;top:5px;"/>
</apex:repeat>
</table> -->
</apex:outputPanel>
</apex:outputPanel>
</body>
</html>
</apex:form>
</apex:page>
This discussion has been closed.
Answers
Hi,
We'd need a link to a page showing the issue to be able to offer any help. Could you please provide such a link.
Allan