Datatable ajax jquery

lmonqueiro

I´m trying to use datatable with ajax, but it didn´t work.

html
[code]



Number



[/code]

Jquery
[code]
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": principal.action + 'listExample',
"aoColumns": [
{ "mData": "id" },
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.getJSON( sSource, aoData, function (json) {
alert(json);
} );
}
} );
[/code]

My json has many objects :

[Object { id=3264, cr=0, seq=5, more...}, Object { id=3263, cr=0, seq=4, more...}, Object { id=3262, cr=0, seq=2, more...}]

At the page, the table just shows "processing".

allan

Doesn't look like you've fully implemented server-side processing ( http://datatables.net/usage/server-side ). Which you enabled with the bServerSide option.

In future, please link to a test case showing the issue as well.

Allan

lmonqueiro

My server-side is implemented with vraptor

[code]
@Path("/listExample")
public void listExample( ) throws SQLException {

List xxxList = xxxDao.getListAll( );
result.use(Results.json()).withoutRoot().from(xxxList).serialize();

}

[/code]

This code is sending a list of objects. What do I have to do to show the data ?

allan

Is it returning sEcho, iTotalRecords and iTotalDisplayRecords as required by the server-side processing mode, and as noted in the documentation? I can't tell from the above. Please link to a test case.

Allan

lmonqueiro

finally, I got it. But I need two more help. When I finish, I will put all code.

1 - I need to put one image in last column, and it will open a form to put data.
2 - when I salve data form, I need to reload datatable. I try fnReloadAjax(), but it didn´t work out.

Jquery
[code]
var xxx = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": false,
"sAjaxSource": principal.action + 'listExample',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{"sWidth":"5%"}, //id
{"sWidth":"5%"}, //seq
{"sWidth":"20%"}, //date
{"sWidth":"20%", "sClass": "right"}, //value
{"sWidth":"20%"}, //state
{"sWidth":"22%"}, //pay date
*** I need to put one image here
]

} );


$("#saveData").click( function() {
$.post(principal.action + 'reciSave', $("#principal").serialize(), function(response) {
var data = response;
if (data.ok == true) {
alert('sucess');
xxx.fnReloadAjax();
}
}
}

});

[/code]

allan

If you are using server-side processing, just use fnDraw to reload the table since each draw will make a request to the server.

Oh - having said that, I see you have bServerSide false above, so you aren't using server-side processing any more. In which case fnReloadAjax is the way to go. What happens when you try that, it looks like it should work to me. Do you get an error?

For the image, use:

[code]
mData: null,
sDefaultContent: ''
[/code]

(Docs mData and sDefaultContent ).

Allan

lmonqueiro

Hi Allan, the image was perfect, thank´s a lot.

When I debug with google tools, there is the message : Uncaught TypeError: Object [object Object] has no method 'fnReloadAjax'.
Is the correct syntax :
var xxx = $('#example').dataTable( {
or
xxx = $('#example').dataTable( {
?

lmonqueiro

Hi Allan, I finished the code. First of all, Thank´s a lote.

Finally Code :

fileExample.js

[code]
...

var crTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"sAjaxSource": principal.action + 'listExample/' + id.val(),
"aoColumns": [
{"sWidth":"5%"},
{"sWidth":"5%"},
{"sWidth":"20%"},
{"sWidth":"20%", "sClass": "right"},
{"sWidth":"20%"},
{"sWidth":"19%"},
{"sWidth":"3%", "bSortable":false, "mData": null, "sDefaultContent": ""}
]
});

$("#save").click( function() {
crTable.fnReloadAjax();
});

...
[/code]

jquery.dataTablePlugins.js

[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( sNewSource !== undefined && sNewSource !== null ) {
oSettings.sAjaxSource = sNewSource;
}

// Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
this.fnDraw();
return;
}

this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

for ( var i=0 ; i