DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Problem Refreshing Data in Server-Side Mode

Problem Refreshing Data in Server-Side Mode

maria94maria94 Posts: 6Questions: 0Answers: 0
edited March 2013 in General
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

Replies

  • allanallan Posts: 63,106Questions: 1Answers: 10,394 Site admin
    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
  • maria94maria94 Posts: 6Questions: 0Answers: 0
    edited March 2013
    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
  • maria94maria94 Posts: 6Questions: 0Answers: 0
    Any Help???
  • allanallan Posts: 63,106Questions: 1Answers: 10,394 Site admin
    > 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
  • maria94maria94 Posts: 6Questions: 0Answers: 0
    edited March 2013
    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
  • allanallan Posts: 63,106Questions: 1Answers: 10,394 Site admin
    > 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
  • maria94maria94 Posts: 6Questions: 0Answers: 0
    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
  • allanallan Posts: 63,106Questions: 1Answers: 10,394 Site admin
    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
  • huambohuambo Posts: 2Questions: 0Answers: 0
    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
  • allanallan Posts: 63,106Questions: 1Answers: 10,394 Site admin
    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
  • huambohuambo Posts: 2Questions: 0Answers: 0
    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????
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.