您的位置：首页 > Web前端 > JQuery

Salesforce + jQuery + dataTable + vf page

2013-07-31 23:14 676 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航