More than 3 years have passed since last update.

SalesforceのPageBlockTableとenhacedList

Last updated at 2021-08-27Posted at 2021-08-26

・要件

SalesforceのVisualpageでデータテーブルの表示のTagは何種類がある。違いは何

・可能コンポーネント

TagのPageBlockTableのコラム長さ調整はできない
ListViewもソートができます。
enhancedListは長さ調整できます。
Datatable+Javascriptで上記より、自由にカスタマイズできる

・コード

PageBlockTable

<apex:page standardController="Account" recordSetVar="Accounts" >
<apex:pageBlock >
<apex:pageBlockSection title="Items" columns="1">
<apex:pageBlockTable value="{!Accounts}" var="d" columnsWidth="250px, 180px, 120px, 100px">
<apex:column value="{!d.Id}"/>
<apex:column value="{!d.Name}"/>
<apex:column value="{!d.Phone}"/>
<apex:column value="{!d.Industry}"/>
</apex:pageBlockTable> 
</apex:pageBlockSection>
</apex:pageBlock>

</apex:page>

ListView

<apex:page showHeader="true" tabstyle="Account">
    <apex:ListViews type="Account" id="AccountList" />
</apex:page>

enhancedList

<apex:page >
    <apex:enhancedList type="Account" height="300" rowsPerPage="10" id="AccountList" />
</apex:page>

Datatable

VF

<apex:page controller="DatatableCntrl" sidebar="false">  
 <head>  
   <apex:includescript value="https://code.jquery.com/jquery-3.3.1.js"/>  
   <apex:includescript value="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"/>  
   <apex:includescript value="https://cdn.datatables.net/1.10.19/js/dataTables.material.min.js"/>  
   <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css"/>  
   <apex:stylesheet value="https://cdn.datatables.net/1.10.19/css/dataTables.material.min.css"/>  
   <script type="text/javascript"> 
   j$ = jQuery.noConflict();  
   j$(document).ready( function () {  
     var accTable = j$('[id$="accTable"]').DataTable({  //datatable 
        columnDefs: [  
     {  
       targets: [ 0, 1, 2 ],  
       className: 'mdl-data-table__cell--non-numeric'  
     }  
   ]  
     });  
   });
   </script>
     
   <style>  
     div.dataTables_wrapper div.dataTables_filter {  
     text-align: right;  
     margin-right: 2%;  
      border-radius: 2px; 
      height: 51px;   
   } 
   
   thead th{
    resize: horizontal;
    overflow: hidden;
    background-color: lightgray;
    border: 1px solid black;
　 } 

   tbody td{
    resize: horizontal;
    overflow: hidden;
    border: 1px solid lightgray;
　 } 

  


   </style>  
 </head>  
 <body>  
   <table id="accTable" class="mdl-data-table" style="width:100%">  
     <thead>  
       <tr>  
         <th>Name</th>  
         <th>Billing State</th>  
         <th>Website</th>  
       </tr>  
     </thead>  
     <tbody>  
       <apex:repeat value="{!accList}" var="acc">  
         <tr>  
           <td>{!acc.Name}</td>  
           <td>{!acc.BillingState}</td>  
           <td>{!acc.Website }</td>  
         </tr>  
       </apex:repeat>  
     </tbody>  
   </table>  
 </body>  
 </apex:page>

Apex

public class DatatableCntrl{  
   public List<Account> accList {get; set;}  
   public DatatableCntrl(){  
     accList = [SELECT Name, BillingState,Website FROM Account where BillingState!='' and Website !='' order by name ];  
   }  
 }

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up