Replies

• allan Posts: 63,405Questions: 1Answers: 10,452 Site admin

  May 2010

  1. No - this is not a valid JSON string. In order for DataTables to be able to process the information the string returned must be valid JSON ( http://jsonlint.com ). If you can't return valid JSON then you must convert it using Javascript to be valid JSON. If you are using server-side processing as well (which you are) then you are missing a number of parameters. See http://datatables.net/usage/server-side .
  
  2. http://datatables.net/examples/server_side/custom_vars.html
  
  3 and 5. http://datatables.net/usage/callbacks#fnServerData
  
  4. No - aoColumns are not mandatory for Ajax sourced data / server-side processing. They can be used to configure DataTables as you want - but if you don't specify them, then DataTables will use it default settings and automatic detection.
  
  6. That is what fnCallback is for - to do all the hard work of drawing the table etc :-)
  
  I'd suggest reading the following pages from the documentation:
  http://datatables.net/usage/#data_sources
  http://datatables.net/usage/server-side
  
  And poking around the examples (particularly with Firebug):
  http://datatables.net/examples
  
  Regards,
  Allan
• SP Posts: 7Questions: 0Answers: 0

  May 2010 edited May 2010

  Thanks Allan.
  
  So I believe setting 'data' parameter is inappropriate in a AJAX call because sSource relays the textbox value being typed in. I am not sure of sSource still - is that set same as sAjaxSource?
  
  It would be helpful if you can tell me what I am trying to achieve is feasible.
  
  I am trying to get data from server side through a webservice call as and when the user types in the Data table textbox. Serverside operations will not involve sorting, pagination etc so I am not setting the bServerside option (false). I would rather prefer to get chunks of data from server side through AJAX call and provide it to datatable as json data through a js varibale and let data table handle the pagination, sorting etc for that result set.
  
  Following might clarify better:
  
  [code]
  
  $(document).ready(function() {
  $('#dTable').dataTable({
  'iDisplayLength': 20,
  'oLanguage' : {'sInfo' : "_START_ - _END_ of (_TOTAL_+)"},
  'sDom' : '<"divScrollContainer"fiprt>',
  'bProcessing' : true,
  'sAjaxSource' : strJson //-------------------> a string populated with json response from server side.
  'fnServerData': function(sSource, aoData, fnCallback) {
  $.ajax({
  "type": "POST",
  "dataType": 'json',
  "contentType": "application/x-www-form-urlencoded; charset=utf-8",
  "url": "http://localhost/service/service.asmx/Pull"
  "success": fnCallback
  });
  }
  } );
  } );
  
  [/code]
  
  If its feasible, then the question is how can I intercept the data from server (which I need to convert to JSON from XML) and set it to strJson so that datatable can take it as json source?
• SP Posts: 7Questions: 0Answers: 0

  May 2010

  Hi Allan,
  
  I am happy to say that I was able to post data to the webservice as and read get back a response now I am just stuck up on how to read the xml response on success in fnCallback.
  
  I am not sure on following :
  
  1. How to read back the xml response in fnCallback.
  2. If I can the value (not sure how) then I can give it to some custom gfunction to output JSON but how do I say datatable to take up the JSON output on ceit is done?
  
  I belive all of these needs to be done in the fncalback but not I am not sure of the reading response and setting/triggering datatable to display it.
  
  This will resolve my issue. Waiting for your inputs :).
  
  Thanks.
• SP Posts: 7Questions: 0Answers: 0

  May 2010 edited May 2010

  Here is how I have the code:
  
  [code]
  $(function() {
  $('#dTable').dataTable({
  'iDisplayLength': 20,
  'oLanguage' : {'sInfo' : "_START_ - _END_ of (_TOTAL_+)"},
  'sDom' : '<"divScrollContainer"fiprt>',
  'bProcessing' : true,
  'bServerSide' : true,
  'sAjaxSource' : 'http://localhost/DQService/DQService.asmx/DummyPull',
  'fnServerData': function(sSource, aoData, fnCallback) {
  //aoData.push( { "sSearch":"TEST"});
  aoData.push( { "name": "query", "value": "test" } );
  $.ajax({
  "type": "POST",
  "dataType": 'xml',
  "contentType": "application/x-www-form-urlencoded; charset=utf-8",
  //"aoColumns": [{"sTitle": "Code"},{"sTitle": "Description"}],
  "url": sSource,
  //"data": "query="+$(this).val(),
  "data":aoData,
  "success":function(xml){
  json = '{\"aaData":[[\"10126\",\"10002253\"],[\"10126\",\"10002253\"]]}';
  fnCallback(json);
  }
  });
  }
  } );
  } );
  [/code]
  
  Now I am trying to set the datatype param as XML and just trying to show up some dummy the data on table to test. But i am encountering an error 'json.aaData is undefined' at the following line in jquery.datatables.min.js although I can see the json param with the hardcoded json in Firebug:
  
  [code]
  if(bReOrder){var aiIndex=_fnReOrderIndex(oSettings,json.sColumns)}for(var i=0,iLen=json.aaData.length;
  [/code]
  
  Pls provide your valuable inputs.
• allan Posts: 63,405Questions: 1Answers: 10,452 Site admin

  May 2010

  1. You need to convert the xml into JSON using standard Javascript techniques. Have a look around Google for how to read an XML document, and then just parse that into a JSON string.
  
  2. I'm not sure I understand. If you give DataTables valid JSON, in the format it is expecting, then it will work fine.
  
  Misc 1. Did you read through the examples and the documentation I linked to? In your latest code you have server-side processing enabled, but the json string is missing a number of the required parameters.
  
  Misc 2. The JSON string is invalid - you don't need the quites, since you are using single quotes as the delimiter.
  
  Allan
• SP Posts: 7Questions: 0Answers: 0

  May 2010 edited May 2010

  Sorry for dragging this on. I went through the link and understand that I need to pass through several other params too following is how I am having my json data:
  [code]
  json = '{sEcho: 1, iTotalRecords: 2, iTotalDisplayRecords: 2, aaData: [ [Tasman,Internet Explorer 4.5],[Tasman,Internet Explorer 5.1]]}';
  [/code]
  Is this how it should be? I have removed the double quotes as you have mentioned. But the aadata param -
  [code]
  aaData: [ [Tasman,Internet Explorer 4.5],[Tasman,Internet Explorer 5.1]]
  [/code]
  is invalid as per jsonlint.com. But with double quotes it works fine.
  
  If I hardcode the following lines
  [code]
  json = '{sEcho: 1, iTotalRecords: 2, iTotalDisplayRecords: 2, aaData: [ [Tasman,Internet Explorer 4.5],[Tasman,Internet Explorer 5.1]]}';
  fnCallback(json);
  [/code]
  DataTable should have rendered the data. Isn't so? But I am getting the same error - 'json.aaData is undefined'. I am not getting what is missing.
  
  
  Regards,
  SP.
• allan Posts: 63,405Questions: 1Answers: 10,452 Site admin

  May 2010

  It was the escaped quotes (the slashes) which were incorrect - not the quote marks themselves :-). Have a look at the JSON that is returned for my server-side scripts using Firebug - you'll see exactly what DataTables is expecting and how it changes. One example is that sEcho cannot be hardcoded - it might work the first time, but there after won't redraw the table. Have a poke around the examples, to see what is happening:
  
  http://datatables.net/examples/
  http://datatables.net/examples/server_side/server_side.html
  
  Allan
• SP Posts: 7Questions: 0Answers: 0

  May 2010

  Thanks Allan.
  
  Sorry I am not able to make out what's wrong with the aadata Following is the JSON data I am passing but still it throws the same error - 'json.aadata is undefined'.
  
  [code]
  json = '{"sEcho": 1, "iTotalRecords": 2, "iTotalDisplayRecords": 2, "aaData": [ ["Tasman","Internet Explorer 4.5"],["Tasman","Internet Explorer 5.1"]]}';
  fnCallback(json);
  [/code]
  
  When I debug using Firebug I can see the value of json as harcoded but 'aadata' remains undefined.
• allan Posts: 63,405Questions: 1Answers: 10,452 Site admin

  May 2010

  That's because it's a string and not a JSON object...
  
  [code]
  json = {"sEcho": 1, "iTotalRecords": 2, "iTotalDisplayRecords": 2, "aaData": [ ["Tasman","Internet Explorer 4.5"],["Tasman","Internet Explorer 5.1"]]};
  fnCallback(json);
  [/code]
  Will assign an object to the variable 'json'.
  
  Allan
• SP Posts: 7Questions: 0Answers: 0

  June 2010

  Thank Allan! That's my mistake its working fine now. Indeed that was great support :).