Pageblock table not displaying anything after apex function

Question

I have a pageblock table that uses a custom controller to access a custom object through the SOQL. The page, when I click preview, does not load anything from the custom objects. (I've set the SOQL) to retrieve all of the custom objects. I am unable to figure out why there is nothing being loaded on the page. Attached is the code below for the VF page and the APEX controller.

<apex:page standardStylesheets="false"  sidebar="false"    
Controller="ProductByVan">
...
<h1>Cart Details</h1> 


<apex:pageBlock >
<apex:pageBlockTable value="{!outSku}" var="VAN" style="table">
<apex:column >
 <apex:facet name="header">VAN Type</apex:facet>
 <apex:outputText value="{!VAN.VANType__c}"/>
</apex:column>
<apex:column >
 <apex:facet name="header">Item Code</apex:facet>
 <apex:outputText value="{!VAN.Item_Code__c}"/>
</apex:column>
<apex:column >
 <apex:facet name="header">Item Description</apex:facet>
 <apex:outputText value="{!VAN.ItemDescription__c}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>

Below is the APEX Controller

public class ProductByVan{

// The action function parameter gets set here - this is the input
//public String skey {get; set;}

// The output is set here so it can be re-rendered into the page
public List<VAN__c> outSku {get; set;}

 public PageReference retrieve() {
   // TODO why is this only returning on and anarbitrary one at that?
   // Pass in the skey via a bind variable
   List<VAN__c> skus = [
           select Item_Code__c, VANType__c, ItemDescription__c
           from VAN__c
           ];
   // Pass out the value
   outSku = skus;
   return null;
     }
   }

Answer 1

In order to dynamically query and display records, you have to do several things:

1. Call a Visualforce action that submits the form data to the server controller.
2. Perform a query on the server and store the results.
3. Perform a re-render in the page to show the information.

Unless you've removed some critical lines of code, you seem to have only coded (2), and I don't see any indication that you're actually calling the action retrieve().

You'd need to have a structure something like this in your page:

<apex:form>
    <apex:pageBlock>
        <apex:pageBlockTable id="myid" value="{!outSku}" var="VAN" style="table">
            <!-- content -->
        </apex:pageBlockTable>
        <apex:commandButton action="{! retrieve }" rerender="myid" value="search" />
    </apex:pageBlock>
</apex:form>

It's critical to include the command component that calls the action with the rerender attribute, to tell Visualforce which elements of your page need to be refreshed after the action returns null.