Visualforce Page
<apex:page controller="tableCls" showheader="false" id="thePage" sidebar="false"
docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
lang="en">
<apex:pageMessages id="msg" />
<apex:form id="theform">
<meta charset="utf-8" />
<meta http-eqv="x-ua-campatible" content="ie-edge" />
<meta name="viewport" content="width=device-width, intial-scale=1" />
<apex:stylesheet value="{!URLFOR($Resource.SLDS232,'assets/styles/salesforce-lightning-design-system.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.SLDS232,'assets/styles/salesforce-lightning-design-system.css')}"/>
<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:outputPanel id="tbb1">
<script>
j$ = jQuery.noConflict();
j$(document).ready(function() {
j$('[id$="OppTable"]').DataTable({
"searching": true,"paging":true,
"destroy" : true,
"autoWidth" : true,
"order": [[ 3, "desc" ]],
});
});
</script>
</apex:outputPanel>
<Br/><Br/>
<table class="slds-table slds-table--bordered" id="OppTable">
<thead>
<tr class="slds-text-heading--label">
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">#</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Name</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Stage</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Amount</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Account Name</div>
</th>
<th class="slds-is-sortable" scope="col">
<div class="slds-truncate">Phone</div>
</th>
</tr>
</thead>
<tbody>
<apex:variable var="indexTL" value="{!1}" />
<Apex:repeat value="{!opportunityList}" var="opp">
<tr class="slds-hint-parent">
<td class="" data-label="RCNumber">
<apex:outputtext value="{!indexTL}"/>
<apex:variable var="indexTL" value="{!indexTL+1}" />
</td>
<td class="" data-label="OppName">
<apex:outputtext styleclass="slds-output" value="{!opp.Name}"/>
</td>
<td class="" data-label="opportunityStage">
<apex:outputtext styleclass="slds-output" value="{!opp.StageName}"/>
</td>
<td class="" data-label="OpportunityAmount">
<apex:outputtext styleclass="slds-output" value="{!opp.Amount}" />
</td>
<td class="" data-label="AccountName">
<apex:outputtext styleclass="slds-output" value="{!opp.Account.Name}"/>
</td>
<td class="" data-label="phone">
<apex:outputtext styleclass="slds-output" value="{!opp.Account.Phone}"/>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:form>
</html>
</apex:page>
apex class
public class tableCls {
public List<Opportunity> opportunityList{get;set;}
public tableCls(){
try{
opportunityList=[SELECT Id, Name, StageName, Amount,
Account.Name, Account.BillingAddress, Account.Phone
FROM Opportunity];
}Catch(Exception e){
opportunityList=new List<Opportunity>();
}
}
}
Thanks Cheers! Lets share your feedback.
when I click next button the sorting hides automatically
ReplyDelete