Problem Refreshing Data in Server-Side Mode

maria94

Hello,

I created an Java/JEE application using Spring mvc.
My goal is to creat a pop-up containing the datatable wich will work in server mode.
Each tap in the filter text box, will call a service that will return a jason response
I used Jquery UI Dialog to contain the datable, it shows fine.

The problem is that when i tape a caractere, the table is leacking on process mode, and it is no refreching.
I tested my Jason response, It's Ok.
And I put some log to see if my service is called every time the user change the filter text box, it's Ok also.

This is the header of my Jsp:

[code]

$(function() {
var oTable;
oTable = $("#myTable").dataTable({
bJQueryUI : true,
sPaginationType : "full_numbers",
iDisplayLength : 8,
"bLengthChange" : false,
"oLanguage" : {
"sUrl" : "resources/language/fr.txt"
},
"bProcessing" : true,
"bServerSide" : true,
cache : false,
"sAjaxSource" : "/SpringMVC/welcome/recherche",
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aoData,
"success" : fnCallback

});
}

});
/* var newtimer = setInterval( function () {
oTable.fnDraw();
}, 1000 ); */

$("#dialog").dialog({
autoOpen : false,
modal : true,
resizable : true,
width : 705,
height : 520,
});

// Link to open the dialog
$("#dialog-link").click(function(event) {
$("#dialog").dialog("open");
event.preventDefault();
});

});


body {
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}


[/code]

And this is my function in the Controller side:

[code]
@RequestMapping(value="/recherche", method = {RequestMethod.POST, RequestMethod.GET})
public @ResponseBody String recherche(@RequestParam String sSearch) {

//Create the response, a well formed JSON including Datatables required vars.
//e.g.
String str = "{ \"sEcho\": 2 ," +
" \"iTotalRecords\": 2," +
" \"iTotalDisplayRecords\": 2," +
" \"aaData\": [" +
" [" +
" \"Gecko\"," +
" \"Firefox 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"Gecko\"," +
" \"Firefox 1.5\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.8\"," +
" \"A\"" +
" ]" +
" ]" +
"}";

System.out.println("------------> test : "+sSearch);
if(sSearch.equalsIgnoreCase("ok")){
System.out.println("------> He's her!!");
str = "{ \"sEcho\": 2 ," +
" \"iTotalRecords\": 2," +
" \"iTotalDisplayRecords\": 2," +
" \"aaData\": [" +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"zaka\"," +
" \"ziko 1.5\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.8\"," +
" \"A\"" +
" ]" +
" ]" +
"}";
}
return str;
}
[/code]

When I tape "Ok" in the filter text box, nothing happen excepte the processing message wich appear.

Thanks for your help.

Maria

allan

You haven't fully implemented server-side processing there. From the documentation ( http://datatables.net/usage/server-side ) :

> An unaltered copy of sEcho sent from the client side. This parameter will change with each draw (it is basically a draw count) - so it is important that this is implemented. Note that it strongly recommended for security reasons that you 'cast' this parameter to an integer in order to prevent Cross Site Scripting (XSS) attacks.

But you are statically returning 2:

> \"sEcho\": 2 ,"

If you want to use server-side processing, you must fully implement the protocol described in the documentation. You should only need server-side processing if you have at least 20'000 rows.

Allan

maria94

Hi,
Thanks Alan, it Works !!
Her's what I changed in my Controller:

[code]
@RequestMapping(value="/recherche", method = {RequestMethod.POST, RequestMethod.GET})
public @ResponseBody String recherche(@RequestParam String sSearch, @RequestParam String sEcho, @RequestParam int iDisplayLength) {

//Create the response, a well formed JSON including Datatables required vars.
//e.g.
String str =
"{ \"sEcho\": "+Integer.valueOf(sEcho)+" ," +
" \"iTotalRecords\": 0," +
" \"iTotalDisplayRecords\": 0," +
" \"aaData\": [" +
" ]" +
"}";

System.out.println("------------> EHEEEY: "+sSearch);
if(sSearch.equalsIgnoreCase("o")){
System.out.println("------> He's her!!");
str = "{ \"sEcho\": "+Integer.valueOf(sEcho)+" ," +
" \"iTotalRecords\": 12," +
" \"iTotalDisplayRecords\": 12," +
" \"iDisplayLength\": 8," +
" \"aaData\": [" +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
" [" +
" \"zaka\"," +
" \"ziko 1.5\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.8\"," +
" \"A\"" +
" ]" +
" ]" +
"}";
}
return str;
}
[/code]

Now, when I tape 'o', I got my table refreshed by the new jason response from my controller.

But I have a new problem, my 12 results shows in the same page, I guess I have to set up the pagination myself, so how can I specify it in my controller response?

Maria

maria94

Any Help???

allan

> But I have a new problem, my 12 results shows in the same page, I guess I have to set up the pagination myself, so how can I specify it in my controller response

Yes you do - that's the whole point of server-side processing. Are you sure you want server-side processing? You need to implement sorting, filtering and paging if you do. You should only need server-side processing if you are working with 20'000+ rows.

Allan

maria94

Thanks for your replay Allan,
In fact, Yes I need server side processing, because my service is using Appach lucene as a search framwork. Lucene is using file system, it will take the search criteria and return an intelligent result, like google.

So now i need to implement sorting, filtering and paging, should I return new values in my Json response? what values? any example?

Maria

allan

> So now i need to implement sorting, filtering and paging, should I return new values in my Json response? what values? any example?

The server-side processing protocol that you need to implement is fully described here and includes example JSON returns: http://datatables.net/usage/server-side . See also these live examples: http://datatables.net/release-datatables/examples/server_side/server_side.html

Allan

maria94

I have already read that, and I dont see any example including paging in the Json response.
My Json response is like that:
[code]
"{ \"sEcho\": "+Integer.valueOf(sEcho)+" ," +
" \"iTotalRecords\": 12," +
" \"iTotalDisplayRecords\": 12," +
" \"iDisplayLength\": 8," +
" \"aaData\": [" +
" [" +
" \"sou\"," +
" \"sou 1.0\"," +
" \"Win 98+ / OSX.2+\"," +
" \"1.7\"," +
" \"A\"" +
" ]," +
....
[/code]
What should I add in my Json response to specify the pagination?????

Maria

allan

You don't add anything for the pagination - you simply return the data to be displayed for the current page. Have a look at the example (the live example) and the XHR in your browser and you will see what I mean.

Allan

huambo

Allan,

Firs of all, great plugin! I am using it in server mode and I think I almost got it to do what I need except for the following:

I do an initial load of 20 records and display it with no problems. The user enters something in the filter, I call my web service and get the data and let's say I got 5 records back. I build my json and it looks good. However, when I feed it to the datatable, it displays the original 20 records???
I tried the ajax refresh but cannot get that to work, as well. Do you have a small example with asp.net?

Cheers,
Huambo

allan

I'm afraid I don't have any examples with ASP.NET. Can you link me to the page you are working on please? I might be able to spot something in the Javascript.

Allan

huambo

Allan,

Just to thank you for the prompt reply! I failed to read the documentation correctly; sEcho is critical in order to do server side paging correctly! My problem is solved!

Cheers,
Huambo

ps. have you considered selling a tutorial on how to use datatables with your best practices????