[SalesForce] what are the different options to display data in Jquery Data table when initial page loads

I have a requirment to display child object records using jquery datatable in each child object jquery tab when a parent is selected.Currently i am using remote action to display all the child records in datatables.Is there any other way to get the rows from controller up on initial page loads.

For Example object A is parent where as object B and object c are linked to A using junction objects.In a visualforce page, on left side of the page object A names are displayed as menu, in center of page multi tabs are shown to switch between object B and C tabels.Initailly, page loads with object A values and object B, C rows in data tables.

Getting Error when using fnserverData function in data table.

"fnServerData": function(sSource, aoData, fnCallback) {   

    for (var i = 0; i < jsonForChildrenA.length; i++) {

        var r = jsonForChildrenA[i].Account__r;
        for(var j = 0; j < accFields.length; j++) {
           var field = accFields[j];
           if (r[field] == undefined) {
                DataTables pops a dialog for undefined values
                r[field] = null;
            } 
        } 
   }
      fnCallback(jsonForChildrenA);
 }

Best Answer

Its not too clear from your question about what problem you are trying to address, but here are two other ways to get the rows from the controller when the page initially loads. (This assumes you are using DataTables.)

1. Normal Visualforce

You can start with a normal apex:pageBlockTable and just add DataTable to it to add the client-side behaviour:

<apex:pageBlockTable value="{!childrenA}" var="c" styleClass="dataTable">
    ...
</apex:pageBlockTable>

<script>
var j$ = jQuery.noConflict();
j$('table.dataTable').dataTable();
</script>

A more detailed example is shown here.

2. Render JSON into the page

You can render the initial JSON into the page by having the controller generate JSON:

public String jsonForChildrenA {
    get {
        return JSON.serializePretty(childrenA);
    }
}

and then assigning it somewhere in the JavaScript in the page:

<script>
...
var jsonForChildrenA = {!jsonForChildrenA};
...
</script>

and then the DataTables fnServerData JavaScript function can just reference that.

Related Topic