Salesforce + jQuery + dataTable + vf page

最新推荐文章于 2021-06-30 09:38:18 发布

yutaolife007

最新推荐文章于 2021-06-30 09:38:18 发布

阅读量2.7k

点赞数

分类专栏： salesforce 开发文章标签： Visualforce Page Salesforce

本文链接：https://blog.csdn.net/y970105/article/details/9674273

版权

salesforce 开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1. 首先下载jQuery 最新的版本，并上传至静态资源中

2. 下载jQuery DataTable plugin，并上传至静态资源中

https://datatables.net/

3. 建立你的apex clss:

public class YUT_DataTableExampleController{

    public ApexPages.Standardsetcontroller contactSet{
    
            get{
              if(contactSet == null){
                  contactSet = new
                  ApexPages.Standardsetcontroller(Database.getQueryLocator(
                  [SELECT Name, Phone, Email, Title, Account.Name FROM Contact]));
              }
              return contactSet;
            }
            set;
    }
    
    public List<contact> getContacts(){
          return (List<contact>) contactSet.getRecords();
    }
}

4.建立你的 VF Page

<apex:page Controller="YUT_DataTableExampleController" docType="html-5.0">
    <head>
    
        <apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js')}"  />


        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/media/css/demo_page.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/media/css/demo_table.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/ColReorder/media/css/ColReorder.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/ColVis/media/css/ColVis.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/ColumnFilterWidgets/media/css/ColumnFilterWidgets.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/media/css/demo_table_jui.css')}"  />
        <apex:stylesheet value="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css')}"  />

        <script src="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/media/js/jquery.dataTables.min.js')}"></script>  
        <script src="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/media/js/jquery.dataTables.js')}"></script>      
        <script src="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/ColVis/media/js/ColVis.js')}"></script>                 
        <script src="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/TableTools/media/js/ZeroClipboard.js')}"></script>          
        <script src="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/TableTools/media/js/TableTools.js')}"></script>             
        <script src="{!URLFOR($Resource.DataTables, '/DataTables-1.9.4/extras/ColumnFilterWidgets/media/js/ColumnFilterWidgets.js')}"></script>

        <script type="text/javascript" charset="UTF-8">

            $(document).ready( function () {
              var oTable = $('#contacttable').dataTable( {
                  "sDom": 'WRC<"clear">lftip',
                  "bJQueryUI": true,
                  "sPaginationType": "full_numbers",
                  "aoColumnDefs": [ { "bVisible": false, "aTargets": [ ] }],
                  "oColumnFilterWidgets": { "aiExclude": [ 0, 3, 4 ] }
             });
          });

        </script>
 
    </head>

    <body>

        <h2>Contact Search Demo with jQuery, DataTables, and Visualforce"</h2>
        <h3>Try out the keyword search, show/hide columns, sort, and pagination!</h3>

        <table cellpadding="0" cellspacing="0" border="0" class="display" id="contacttable" style="margin-top:20px;">

            <thead>
             <tr>
                 <th>Name</th>
                 <th>Account</th>
                 <th>Title</th>
                 <th>Phone</th>
                 <th>Email</th>
             </tr>
            </thead>

            <tfoot>
             <tr>
                 <th>Name</th>
                 <th>Account</th>
                 <th>Title</th>
                 <th>Phone</th>
                 <th>Email</th>
             </tr>
            </tfoot>

            <tbody>

                <apex:repeat value="{!Contacts}" var="c">
                    <tr>
                      <td>{!c.Name}</td>
                      <td>{!c.Account.Name}</td>
                      <td>{!c.Title}</td>
                      <td>{!c.Phone}</td>
                      <td>{!c.Email}</td>
                  </tr>
                 </apex:repeat>

            </tbody>

        </table>

    </body>

</apex:page>

5.访问你的VF Page

http;//xxxx.force.com/apex/your_VF_page

yutaolife007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Salesforce + jQuery + dataTable + vf page

1. 首先下载jQuery 最新的版本，并上传至静态资源中2. 下载jQuery DataTable plugin，并上传至静态资源中https://datatables.net/3. 建立你的apex clss:public class YUT_DataTableExampleController{ public ApexPages.Standardsetc
复制链接

扫一扫

专栏目录