Trying to run datatables in grails

haah

Hello
I just found out this awesome jquery plugin but couldn't get it to work with my grails program (maybe the lack of javascript experience)
Basically what i am trying to do is read a JSON list back from my controller but the problem is i just can't seem to execute the controller? Here is what i have done
html header
[code]

Testing tables




$(document).ready(function(){
$('#people-table').dataTable({
"sAjaxSource":
});
});


[/code]

body
[code]



id
amount
name





[/code]

controller
[code]
def returnJSON = {
println "lalalala"
def superSalaryList = TestMap.list()

println 'a' + superSalaryList
render superSalaryList as JSON
}
[/code]

I think the issues is at the sAjaxSource requires a certain formatted link? https?

Thanks

allan

Hi haah,

I'm afraid I know little to nothing about grails, but the following two examples might be of use to you:

http://datatables.net/examples/data_sources/js_array.html
http://datatables.net/examples/data_sources/ajax.html

The first has a Javascript array as the data source, and the second gives DataTables a URL to go and get the data from a different address.

Regards,
Allan

haah

Hello thanks Allan
I've tried both of the example before i post it here
but i think the problem is that the sAjaxSource = is not firing the link that i pass in
[code]

Testing tables




$(document).ready(function(){
$('#people-table').dataTable({
"sAjaxSource":
});
});


[/code]

did i miss something in the sytax for the datatables?

allan

Does "" get rendered into an HTTP link? If you open that address in a browser, does it get the required json, in the correct format?

Regards,
Allan

haah

Hello Alan
this is my gsp code
[code]






$(document).ready(function(){
$('#people-table').dataTable({
"sAjaxSource":'${createLink (action:'returnJSON')}'
});
});

Sample title


Sample line


[/code]

here's my html output
[code]









$(document).ready(function(){
$('#people-table').dataTable({
"sAjaxSource":'/GrailsTestJQuery/car/returnJSON'
});
});



Sample title


Sample line




[/code]

i tried
a few options
1. createLink
2.
3. remoteLink
4. remoteFunction

allan

So if you load up http://{your-domain}/GrailsTestJQuery/car/returnJSON in a browser - what do you get?

Allan

haah

finally i got the action fired

the issues is at the gsp page where i must have the table code available
[code]



id
name







[/code]

now the problem is the data is not showing
i formated my data return like this
[code]
def returnJSON = {
def data = [:]
def carList = Car.list()
def carListInJSON = carList as JSON

def carHeader = [["sTitle":"id"],["sTitle":"name"]] as JSON

data.put("aaData",carListInJSON)
data.put("aoColumns",carHeader)
data.put("iTotalRecords",carList.count())
data.put("iTotalDisplayRecords",2)
data.put("sEcho",1)

println 'data' + data
return data
}
[/code]
what is the correct format should i put for the return data ?
Thanks

allan

Basically like this for an Ajax data source:
http://datatables.net/examples/examples_support/json_source.txt

Allan

haah

Thanks allan. i tried out the data but it says "no matching records found" on my page. The paginate, filter box does show up though
here my code and output
[code]
def returnJSON = {
def aaData = TestMap.list()
println "aaData = " + aaData
def data = [:]
println "data in JSON = " + data

data.put("aaData",aaData)

// println "after put aaData into data = " + data
return data as JSON

}
[/code]
does this look correct? is there any specific way in building a JSON ?

haah

i got it working but not exactly how i want it though
what i did is not putting the data into a map but into a list. This will resolve the issues where the map key cannot match with the id i define in the gsp page.
[code]
def returnJSON = {
println "lalalala"
def list = []
def listData = TestMap.list()

listData.each{
list << [
it.id,
it.name
]
}

def data = ["aaData":list]
render data as JSON
}
[/code]

my gsp code
[code]


Testing tables



@import "../css/demo_table.css";




$(document).ready(function(){
$('#people-table').dataTable({
"sAjaxSource":'${createLink (action:'returnJSON')}'
});
});




Testing tables
lala



id
name







[/code]

why if i put my action into the following method and it won't work?
[code]
def returnJSON = {
println "lalalala"
def list = []
def listData = TestMap.list()

listData.each{
list << [
"id":it.id,
"name":it.name
]
}

def data = ["aaData":list]
render data as JSON
}
[/code]
take note on the id and name at the list <<
shouldn't this be map with the id and name at the gsp page?
like this
[code]



id
name





[/code]

allan

Your DataTables initialisation certainly looks okay - so as long as your JSON data fits this formatting: http://datatables.net/examples/examples_support/json_source.txt - then it should work great. However, I'm afraid I'm not the right person to comment on more general grails code as I've never used it! Perhaps a grails forum might be able to help you format the data in a way more to your liking?

Another option might be to use fnServerData to "post-process" your data and take it from the format reuired by your server page, and change it into that needed by DataTables. But that's another step in the process...

Regards,
Allan