Restful table (AUI 7.9.9) does not show the data, only the loading text

[Hy Nguyen]

Hi, I'm using the AUI version 7.9.9 and trying to create a Restful table from my rest resource.

I have this table in vm file:

<table id="custom-field-table" class="aui-restfultable aui-restfultable-allowhover aui">

The data were meant to be get from this REST:
@Path("/customfield")
@Consumes ({ MediaType.APPLICATION_JSON })
@Produces ({ MediaType.APPLICATION_JSON })
public class CustomFieldResource {

@Autowired
private CustomFieldManager customFieldManager;

@GET
@AnonymousAllowed
@Path("/")
@Produces({MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML})
public Response getMessage() {
final List<CustomField> allCustomFields = customFieldManager.getCustomFieldObjects();
List<CustomFieldDTO> customFieldDTOs = new ArrayList<>();
allCustomFields.forEach(cf -> customFieldDTOs.add(new CustomFieldDTO(cf.getId(), cf.getFieldName())));
return Response.ok(new Gson().toJson(customFieldDTOs)).build();
}

@GET
@Path("/{id}")
@AnonymousAllowed
public Response get(@PathParam("id") final String id) {
final CustomField customField = customFieldManager.getCustomFieldObject("customfield_10100");
final CustomFieldDTO dto = new CustomFieldDTO(customField.getId(), customField.getFieldName());
return Response.ok(new Gson().toJson(dto)).build();
}

@PUT
@Path ("/{id}")
@AnonymousAllowed
public Response updateVersion(@PathParam ("id") final String id, final CustomFieldDTO bean)
{
return Response.ok().build();
}


@POST
@Path ("/{id}")
@AnonymousAllowed
public Response createVersion(final CustomFieldDTO bean)
{
return Response.ok().build();
}

@DELETE
@Path ("/{id}")
public Response delete(@PathParam ("id") final String id)
{
return Response.ok().build();
}
}

The CustomFieldDTO

public class CustomFieldDTO {

@Getter
@Setter
private String id;

@Getter
@Setter
private String fieldName;
}

This javascript function create the Restful table from REST:
function callRestfulTable() {
console.log("Call table");
var baseUrl = "http://localhost:2990/jira";
var requestURL = baseUrl + "/rest/cfresource/1.0/customfield";
var selfURL = baseUrl + "/rest/cfresource/1.0/customfield";
new AJS.RestfulTable({
autoFocus: true,
el: jQuery("#custom-field-table"),
allowReorder: true,
resources: {
all: requestURL,
self: selfURL
},
columns: [
{
id: "id",
header: "ID"
},
{
id: "fieldName",
header: "Field Name"
}
]
});
}

Some how the beautiful table data doesn't showed up. I get only the headers, instead of the data, I get the "loading" text in the tbody.

Could someone please help me with this problem?