How to paint a visualforce grid without using APEX controller?

Question

I am reading an array of JSON records from a third party site using jQuery and storing it in visualforce array. This is the jquery code below.

$.ajax({
                    xhrFields: {
                        withCredentials: true
                    },
                    url: dcUrl, 
                    crossDomain: true,
                    cache: false,
                data: {},
                dataType: "json",
                type: 'GET',
                //timeout : 10000,
                success: function (d) {
                    if (d) {
                            for (var i = 0; i < d.d.results.length; i++) {

                                if (( d.d.results[i].Icon.toLowerCase() === "document") || ( d.d.results[i].Icon.toLowerCase() === "file"))

                                {
                                    data1[i] = {
                                    Id: d.d.results[i].Id,
                                    Name: d.d.results[i].DisplayName,
                                    Owner: "New " + d.d.results[i].Owner,
                                    ModificationDate: d.d.results[i].ModificationDate} 
                                 }   
                                 ;

While I am able to use slickgrid to paint a grid table, I would really like to use native visualforce grid with pagination. However the trouble is, all examples I find require me to use an Apex Controller. Something like below

<apex:pageBlock title="Accounts with assoicated Contacts">
    <apex:repeat value="{!accountList }" var="acc">
        <apex:pageBlockSection title="{!acc.name}">
            <apex:pageBlockTable value="{!acc.contacts}" var="con">
                <apex:column value="{!con.Firstname}"/>
                <apex:column value="{!con.Lastname}"/>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:repeat>
</apex:pageBlock>

Is there any way I can use the variable data1[i] and iterate over it's values inside apex repeat method without having to use a controller?

Answer 1

Visualforce (JSPX) tags like apex:repeat execute at the server side and emit HTML that is passed to the client (the browser).

Your AJAX request is executing in the client (the browser) so unless you first push the data back to the server (for which you would need an Apex controller) you can't make used of tags like apex:repeat. Instead you can create DOM elements using JavaScript, either raw JavaScript or you could leverage other JavaScript libraries such as DataTables. You can reverse engineer some of the CSS styles and add them to make the table stying fit better.

Note that outputting a non-editable table this way can make a lot of sense as the table will appear quickly. Supporting an editable table this way is a fair bit harder.