Can't get Datatables to function within Salesforce

dbalke27

I am trying to implement datatables within Salesfoce vf page and I can't seem to get the jQuery or Datatables plugin to work properly. The code that I have renders the table with the data that is in Salesforce, but it doesn't have any of the functionality that the Datatable table should have (sorting, inline editing, etc). I tried creating a test case, but since I have apex and am referencing data within Salesforce, I only get the headers and nothing else. I also don't think I can link to the web-page with the code on since it is in Salesforce and you would have to have a login to my instance to view it. I was following this presentation to enable Datatables within Salesforce: http://www.slideshare.net/developerforce/df13-tables-andcharts-1. I have also talked with Salesforce support and they do not know how to fix the issue either (or don't really care). If anyone could help me out and tell me what I am doing wrong, that would be great. Thank you!

Controller:
public class jquery_table{

public String opportunity { get; set; }

public jquery_table() {} // Empty Constructor

//Non-Static method to return accounts for standard apex:pageblocktable
public List getOpportunities(){
return datatable_demo();
}

@RemoteAction //Remote Action to expose method to JavaScript Remoting
public static List datatable_demo(){
//Query Opportunities Table
return [select id, name, AccountId, Amount, CloseDate, ForecastCategoryName, TotalOpportunityQuantity, OwnerId
from Opportunity order by name limit 50];
}
}

Visualforce Page:



jQuery UI Autocomplete - Default functionality
<!--















-->


var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('#demo_table').dataTable({
"bJQueryUI": true, "sDom": 'flptir', "bAutoWidth": false,
"aoColumnDefs": [
{ "aTargets":[ "name" ], "mData": "Name", sClass:"Name", "bAutoWidth": false },
{ "aTargets":[ "accname" ], "mData": "AccountId", sClass:"AccountId", "bAutoWidth": false },
{ "aTargets":[ "amount" ], "mData": "Amount", sClass:"Amount", "bAutoWidth": false },
{ "aTargets":[ "closedate" ], "mData": "CloseDate", sClass:"CloseDate", "bAutoWidth": false },
{ "aTargets":[ "ForeCatName" ], "mData": "ForecastCategoryName", sClass:"ForecastCategoryName", "bAutoWidth": false },
{ "aTargets":[ "quantity" ], "mData": "TotalOpportunityQuantity", sClass:"TotalOpportunityQuantity", "bAutoWidth": false },
{ "aTargets":[ "owner" ], "mData": "OwnerId", sClass:"OwnerId", "bAutoWidth": false },
],
"fnInitComplete": function(oSettings) {
jquery_table.dataTable(function(result, event){
if(event.type == 'exception') {
alert(event.message);
} else {
$j('#demo_table').dataTable().fnAddData(result);
}
});
},"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$j('td:eq(0)', nRow).html( '');

}
});
});




<!-- Visualforce for Standard PageBlockTable -->











<!-- End of Visualforce for Standard PageBlockTable -->





<!-- HTML for jQuery DataTables -->


Select
Name
Account Name
Amount
Close Date
Forecast Category Name
Quantity
Owner Name



<!-- End of HTML for jQuery DataTables -->

allan

> https://cs9.salesforce.com/resource/1391012849000/jquerydatatables

An empty page. Doesn't look right to me. Shouldn't there be some code in there?

Allan

dbalke27

I guess I am confused by the question. I do have code in my visualforce page as shown above. When you click on the link that you pasted, what are you supposed to see?

tangerine

All your links to scripts and stylesheets are commented out.

allan

> When you click on the link that you pasted, what are you supposed to see?

I just get an empty page - 0 bytes in length. Perhaps because I'm not logged in.

However, tangerine makes a darn good point!

Allan

dbalke27

So i changed the links to scripts and the stylesheets to this:















But nothing renders still.

tangerine

But did you "uncomment" them?