How to inititialize AUI Restful table via function ?

[anton ronin]

How to properly initialize Restful table via function ?

AJS.$(document).ready(function () {
    new AJS.RestfulTable({
        autoFocus: true,
        el: jQuery("#restfultable-data-from-url"),
        allowReorder: true,
        resources: {
            all: "http://jsonplaceholder.typicode.com/todos"
        },
        columns: [
            {
                id: "id",
                header: "ID"
            },
            {
                id: "userId",
                header: "User ID"
            },
            {
                id: "title",
                header: "TITLE"
            },
            {
                id: "completed",
                header: "Completed"
            }
        ]
    });
});

var data = [{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}, { "userId": 1, "id": 2, "title": "quis ut nam facilis et officia qui", "completed": false}, { "userId": 1, "id": 3, "title": "fugiat veniam minus", "completed": false}, { "userId": 1, "id": 4, "title": "et porro tempora", "completed": true}, { "userId": 1, "id": 5, "title": "laboriosam mollitia et enim quasi adipisci quia provident illum", "completed": false}, { "userId": 1, "id": 6, "title": "qui ullam ratione quibusdam voluptatem quia omnis", "completed": false}, { "userId": 1, "id": 7, "title": "illo expedita consequatur quia in", "completed": false}, { "userId": 1, "id": 8, "title": "quo adipisci enim quam ut ab", "completed": true}, { "userId": 1, "id": 9, "title": "molestiae perspiciatis ipsa", "completed": false}, { "userId": 1, "id": 10, "title": "illo est ratione doloremque quia maiores aut", "completed": true}];

    function getData() {
        return data;
    }

    AJS.$(document).ready(function () {
        new AJS.RestfulTable({
            autoFocus: true,
            el: jQuery("#restfultable-data-from-function"),
            allowReorder: true,
            resources: {
// test
//                all: "http://jsonplaceholder.typicode.com/todos"

// #1
                all: function() {
                    return data;
                }
// #2
/*
                all: function() {
                    return {
                        data: data
                    };
                }
*/
// #3
/*
                all: function() {
                    return {
                        all: data
                    };
                }
*/
// #4
/*
                all: getData();
*/
// #5
/*
                all: data;
*/
// #6
/*
                all: [{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}, { "userId": 1, "id": 2, "title": "quis ut nam facilis et officia qui", "completed": false}, { "userId": 1, "id": 3, "title": "fugiat veniam minus", "completed": false}, { "userId": 1, "id": 4, "title": "et porro tempora", "completed": true}, { "userId": 1, "id": 5, "title": "laboriosam mollitia et enim quasi adipisci quia provident illum", "completed": false}, { "userId": 1, "id": 6, "title": "qui ullam ratione quibusdam voluptatem quia omnis", "completed": false}, { "userId": 1, "id": 7, "title": "illo expedita consequatur quia in", "completed": false}, { "userId": 1, "id": 8, "title": "quo adipisci enim quam ut ab", "completed": true}, { "userId": 1, "id": 9, "title": "molestiae perspiciatis ipsa", "completed": false}, { "userId": 1, "id": 10, "title": "illo est ratione doloremque quia maiores aut", "completed": true}];
*/
            },
            columns: [
                {
                    id: "id",
                    header: "ID"
                },
                {
                    id: "userId",
                    header: "User ID"
                },
                {
                    id: "title",
                    header: "TITLE"
                },
                {
                    id: "completed",
                    header: "Completed"
                }
            ]
        });

https://bitbucket.org/anton_ronin/aui-restful-table-sandbox

[Frédéric Esnault · Accepted solution]

Hi,

I just faced the same situation. With the 'all' parameter set to a REST url, it works fine.

But if i set the all parameter to the name of a function, it does not work. Table is empty.

I took some time debugging the restful-table javascript code, and saw this :

if ($.isFunction(this.options.resources.all)) {
     this.options.resources.all(function (entries) {
     instance.populate(entries);
  });
} else {...}

This means the function you call must not return the data to display, but receive a populate function as a parameter, and call this function with the data.

I did like this :

function getData(populate) {
    var url = AJS.contextPath() + "/rest/myplugin/1.0/admin/data/list";
    jQuery.ajax({
        type: "GET",
        url: url,
        dataType: 'json'
    }).done(function(data, textStatus, jqXHR) {
        if (data.ok) {
            populate(data.nodes);
        }
    }).fail(function(data, textStatus, jqXHR) {
        console.log(textStatus);
    });
}

My data object contains two fields :

• ok : boolean
• nodes : contains the actual data for the table

populate is the name i give to the function parameter received from restful table call.

If data.ok is true, i just have to call the function that the restfultable gave me as a parameter with data.nodes, and it works.