Apex Code Development You need to sign in to do that
Don't have an account?
Andrew Aldis JQuery Data Table not working
We are trying to develop a Visual Force page to show some product data and configure it in a Jquery data table that will allow us to sort, paginate, and search throught the records. We currently have a VF page that does exactly that and works fine however when we try to use the save Jquery and HTML in this new page it does not allow us to sort, paginate or search. Can any one point us in the right direction? Our page and class are below.
PAGE:
<apex:page controller="SalesHardWareProductDetails" readOnly="true" showHeader="False" title="Sales Hardware Product Details" >
<head>
<apex:includeScript value="https:////code.jquery.com/jquery-1.12.3.js"/>
<apex:includeScript value="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"/>
<apex:stylesheet value="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"/>
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"/>
<apex:includeScript value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"/>
<apex:includeScript value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"/>
<apex:stylesheet value="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>
<script>
$(document).ready(function() {
$('#tracking').DataTable( {
dom: 'Bfrtip',
buttons: [
'excel', 'csv',
{
extend: 'pdf',
text: 'PDF',
orientation: 'landscape',
title: 'Four Winds Interactive Tracking Information',
}
]
} );
} );
</script>
</head>
<table id="tracking" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Type</th>
<th>Brand</th>
<th>Manufacturer Part Number</th>
<th>FWI Sell Price</th>
<th>Native Resolutions</th>
<th>Diagonal (in)</th>
<th>Width (in)</th>
<th>Height (in)</th>
<th>Depth (in)</th>
<th>Bezel (mm)</th>
<th>Brightness (nits)</th>
<th>VESA Pattern</th>
<th>Power Consumption</th>
<th>Screen Orientation</th>
<th>Product Warranty</th>
<th>Product Datasheet</th>
</tr>
</thead>
<apex:repeat value="{!itemDetails}" var="i">
<tr>
<td>{!i.productType}</td>
<td>{!i.brand}</td>
<td>{!i.itemNumber} </td>
<td>{!i.manufacturerPartNumber}</td>
<td>{!i.fwiSellPrice }</td>
<td>{!i.nativeResolutions}</td>
<td>{!i.diagonal}</td>
<td>{!i.width}</td>
<td>{!i.height} </td>
<td>{!i.depth}</td>
<td>{!i.bezel}</td>
<td>{!i.brightness}</td>
<td>{!i.vesa} </td>
<td>{!i.powerConsumption}</td>
<td>{!i.screenOrientation}</td>
<td>{!i.productWarranty}</td>
<td>{!i.productDatasheet}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
CLASS
public class SalesHardWareProductDetails {
public List<SCMC__Item__c> items {get; set;}
public List<itemDetails> itemDetails {get; set;}
public SalesHardWareProductDetails() {
itemDetails = new List<itemDetails>();
getitems();
getitemDetails();
}
public class itemDetails
{
public string productType {get; set;}
public string brand {get; set;}
public string itemNumber {get; set;}
public string manufacturerPartNumber {get; set;}
public decimal fwiSellPrice {get;set;}
public string nativeResolutions {get;set;}
public string diagonal {get;set;}
public string width {get;set;}
public string height {get;set;}
public string depth {get;set;}
public string bezel {get; set;}
public string brightness {get;set;}
public string vesa{get;set;}
public string powerConsumption {get;set;}
public string screenOrientation {get;set;}
public string productWarranty{get;set;}
public string productDatasheet {get;set;}
public itemDetails(){}
}
public list <SCMC__Item__c> getitems(){
items = [select Product_Type__c, Id, Brand__c, Name, Manufacturer_Part_Number__c, FWi_Sell_Price_Price_Name__c, Native_Resolutions__c, Product_Diagonal_Screen_Size__c, Width_in__c, Height_in__c,
Depth_in__c, Bezel_mm__c, Brightness_nits__c, VESA_Pattern__c, Power_Consumption__c, Screen_Orientation__c, Product_Warranty__c, Product_Datasheet__c, Subcategory__c
From SCMC__Item__c
WHERE Brand__C != Null AND Subcategory__c != 'Product End Of Life (Only use for PCR)' Order by Product_Type__c asc];
system.debug(' item size '+items.size());
return items;
}
public list<itemDetails> getitemDetails(){
itemDetails = new list<itemDetails>();
for(SCMC__Item__c i :items){
itemDetails add = new itemDetails();
add.productType = i.Product_Type__c;
add.brand = i.Brand__c;
add.itemNumber = i.Name;
add.manufacturerPartNumber = i.Manufacturer_Part_Number__c;
add.fwiSellPrice = i.FWi_Sell_Price_Price_Name__c;
add.nativeResolutions = i.Native_Resolutions__c;
add.diagonal = i.Product_Diagonal_Screen_Size__c;
add.width = i.Width_in__c;
add.height = i.Height_in__c;
add.depth = i.Depth_in__c;
add.bezel = i.Bezel_mm__c;
add.brightness = i.Brightness_nits__c;
add.vesa = i.VESA_Pattern__c;
add.powerConsumption = i.Power_Consumption__c;
add.screenOrientation = i.Screen_Orientation__c;
add.productWarranty = i.Product_Warranty__c;
add.productDatasheet = i.Product_Datasheet__c;
itemDetails.add(add);
}
return itemDetails;
}
}
PAGE:
<apex:page controller="SalesHardWareProductDetails" readOnly="true" showHeader="False" title="Sales Hardware Product Details" >
<head>
<apex:includeScript value="https:////code.jquery.com/jquery-1.12.3.js"/>
<apex:includeScript value="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"/>
<apex:stylesheet value="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"/>
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"/>
<apex:includeScript value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"/>
<apex:includeScript value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"/>
<apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"/>
<apex:stylesheet value="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>
<script>
$(document).ready(function() {
$('#tracking').DataTable( {
dom: 'Bfrtip',
buttons: [
'excel', 'csv',
{
extend: 'pdf',
text: 'PDF',
orientation: 'landscape',
title: 'Four Winds Interactive Tracking Information',
}
]
} );
} );
</script>
</head>
<table id="tracking" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Type</th>
<th>Brand</th>
<th>Manufacturer Part Number</th>
<th>FWI Sell Price</th>
<th>Native Resolutions</th>
<th>Diagonal (in)</th>
<th>Width (in)</th>
<th>Height (in)</th>
<th>Depth (in)</th>
<th>Bezel (mm)</th>
<th>Brightness (nits)</th>
<th>VESA Pattern</th>
<th>Power Consumption</th>
<th>Screen Orientation</th>
<th>Product Warranty</th>
<th>Product Datasheet</th>
</tr>
</thead>
<apex:repeat value="{!itemDetails}" var="i">
<tr>
<td>{!i.productType}</td>
<td>{!i.brand}</td>
<td>{!i.itemNumber} </td>
<td>{!i.manufacturerPartNumber}</td>
<td>{!i.fwiSellPrice }</td>
<td>{!i.nativeResolutions}</td>
<td>{!i.diagonal}</td>
<td>{!i.width}</td>
<td>{!i.height} </td>
<td>{!i.depth}</td>
<td>{!i.bezel}</td>
<td>{!i.brightness}</td>
<td>{!i.vesa} </td>
<td>{!i.powerConsumption}</td>
<td>{!i.screenOrientation}</td>
<td>{!i.productWarranty}</td>
<td>{!i.productDatasheet}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
CLASS
public class SalesHardWareProductDetails {
public List<SCMC__Item__c> items {get; set;}
public List<itemDetails> itemDetails {get; set;}
public SalesHardWareProductDetails() {
itemDetails = new List<itemDetails>();
getitems();
getitemDetails();
}
public class itemDetails
{
public string productType {get; set;}
public string brand {get; set;}
public string itemNumber {get; set;}
public string manufacturerPartNumber {get; set;}
public decimal fwiSellPrice {get;set;}
public string nativeResolutions {get;set;}
public string diagonal {get;set;}
public string width {get;set;}
public string height {get;set;}
public string depth {get;set;}
public string bezel {get; set;}
public string brightness {get;set;}
public string vesa{get;set;}
public string powerConsumption {get;set;}
public string screenOrientation {get;set;}
public string productWarranty{get;set;}
public string productDatasheet {get;set;}
public itemDetails(){}
}
public list <SCMC__Item__c> getitems(){
items = [select Product_Type__c, Id, Brand__c, Name, Manufacturer_Part_Number__c, FWi_Sell_Price_Price_Name__c, Native_Resolutions__c, Product_Diagonal_Screen_Size__c, Width_in__c, Height_in__c,
Depth_in__c, Bezel_mm__c, Brightness_nits__c, VESA_Pattern__c, Power_Consumption__c, Screen_Orientation__c, Product_Warranty__c, Product_Datasheet__c, Subcategory__c
From SCMC__Item__c
WHERE Brand__C != Null AND Subcategory__c != 'Product End Of Life (Only use for PCR)' Order by Product_Type__c asc];
system.debug(' item size '+items.size());
return items;
}
public list<itemDetails> getitemDetails(){
itemDetails = new list<itemDetails>();
for(SCMC__Item__c i :items){
itemDetails add = new itemDetails();
add.productType = i.Product_Type__c;
add.brand = i.Brand__c;
add.itemNumber = i.Name;
add.manufacturerPartNumber = i.Manufacturer_Part_Number__c;
add.fwiSellPrice = i.FWi_Sell_Price_Price_Name__c;
add.nativeResolutions = i.Native_Resolutions__c;
add.diagonal = i.Product_Diagonal_Screen_Size__c;
add.width = i.Width_in__c;
add.height = i.Height_in__c;
add.depth = i.Depth_in__c;
add.bezel = i.Bezel_mm__c;
add.brightness = i.Brightness_nits__c;
add.vesa = i.VESA_Pattern__c;
add.powerConsumption = i.Power_Consumption__c;
add.screenOrientation = i.Screen_Orientation__c;
add.productWarranty = i.Product_Warranty__c;
add.productDatasheet = i.Product_Datasheet__c;
itemDetails.add(add);
}
return itemDetails;
}
}
Your code was not posted at the right place (Visualforce Development instead of Java).
JQuery is it JavaScript by the way (not java at all).
Your sample code posted here works fine so can you post the code which doesn't work with "SAVE JQuery and HTML"? (or the solution perhaps, much better). It lacks a part of the VFP.
My own test with your code (just simplified with Product2): this part works for you and me. It lacks the bad part of your VFP.
<apex:page controller="JQueryDataTable" readOnly="true" showHeader="False" title="Sales Hardware Product Details" > <head> <apex:includeScript value="https:////code.jquery.com/jquery-1.12.3.js"/> <apex:includeScript value="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"/> <apex:stylesheet value="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/> <apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"/> <apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"/> <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"/> <apex:includeScript value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"/> <apex:includeScript value="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"/> <apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"/> <apex:includeScript value="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"/> <apex:stylesheet value="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/> <script> $(document).ready(function() { $('#tracking').DataTable( { dom: 'Bfrtip', buttons: [ 'excel', 'csv', { extend: 'pdf', text: 'PDF', orientation: 'landscape', title: 'Four Winds Interactive Tracking Information', } ] } ); } ); </script> </head> <table id="tracking" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Product Name</th> <th>Code</th> <th>Product Family</th> <th>Active</th> </tr> </thead> <apex:repeat value="{!itemDetails}" var="i"> <tr> <td>{!i.Name}</td> <td>{!i.ProductCode}</td> <td>{!i.Family} </td> <td>{!i.isActive}</td> </tr> </apex:repeat> </table> </apex:page>public class JQueryDataTable { public List<Product2> itemDetails {get;set;} public JQueryDataTable() { itemDetails = [select name,productcode,family,isactive from product2]; } }I use DATATABLE with buttons and so on for my own tools so I can help you perhaps.
Regards
Alain