Datatable ajax jquery
Datatable ajax jquery
lmonqueiro
Posts: 12Questions: 0Answers: 0
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".
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".
This discussion has been closed.
Replies
In future, please link to a test case showing the issue as well.
Allan
[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
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]
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
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( {
?
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