Replies

• allan Posts: 63,280Questions: 1Answers: 10,425 Site admin

  July 2011

  You need to use "name" rather than "key", as required by jQuery and shown here: http://datatables.net/release-datatables/examples/server_side/custom_vars.html
  
  Allan
• learner91 Posts: 7Questions: 0Answers: 0

  July 2011

  Thank you so much for your help, i can send the data to server now.
  
  My problem now is
  
  [code]$('#submit').click(function(){
  
  var from = $('#from').val();
  var to = $('#to').val();
  var loadURL = 'queryAJAX.php';
  
  if(typeof oTable == 'undefined'){
  oTable = $('#specificDateTable').dataTable({
  "bProcessing": true,
  "bRetrieve": true,
  "sAjaxSource": loadURL,
  "fnServerData": function ( sSource, aoData, fnCallback ) {
  aoData.push(
  {"name":"from","value":from},
  {"name":"to","value":to}
  );
  
  $.ajax( {
  "dataType": 'json',
  "type": "POST",
  "url": sSource,
  "data": aoData,
  "success": fnCallback
  });
  }
  });
  }else{
  //Reload the table with new data
  
  }
  });[/code]
  
  I'm thinking of using fnReloadAjax to reload the table, my question is within the code of fnReloadAjax
  [code]oSettings.fnServerData( oSettings.sAjaxSource, [], function(json) {
  /* Clear the old information from the table */
  that.oApi._fnClearTable( oSettings );
  
  /* Got the data - add it to the table */
  for ( var i=0 ; i
• fbas Posts: 1,094Questions: 4Answers: 0

  July 2011 edited July 2011

  if you use fnDraw() it will requery your server side and will use all the aoData parameters you specify.
  
  Move your 'from' and 'to' code into the fnServerData so that it grabs the current value each time this server call is made.
  [code]
  "fnServerData": function ( sSource, aoData, fnCallback ) {
  aoData.push(
  {"name":"from","value":$('#from').val()},
  {"name":"to","value":$('#to').val()}
  );
  [/code]
  
  [code]
  // make sure your oTable variable is defined globally or otherwise some way you can retrieve it rather than just defining it within your event handler
  var oTable;
  
  
  $(document).ready(function() { // initialize the oTable as soon as the DOM is ready
  
  oTable = $('#specificDateTable').dataTable({
  // ...
  });
  
  
  $('#submit').click(function(){ oTable.fnDraw() }); // or simply $('#submit').click(oTable.fnDraw);
  });
  
  [/code]
• learner91 Posts: 7Questions: 0Answers: 0

  July 2011

  Thank you fbas!
  
  My table needs data from click submit button to be displayed at the 1st time.
  
  From your suggestion, I change the order of the code
  
  [code]
  var oTable;
  
  $(document).ready(function() {
  
  $('#submit').click(function(){
  if(typeof oTable == 'undefined'){
  var loadURL = 'queryAJAX.php';
  
  oTable = $('#specificDateTable').dataTable({
  "bProcessing": true,
  "bRetrieve": true,
  "sAjaxSource": loadURL,
  "fnServerData": function ( sSource, aoData, fnCallback ) {
  aoData.push(
  {"name":"from","value":$('#from').val()},
  {"name":"to","value":$('#to').val()}
  );
  
  $.ajax( {
  "dataType": 'json',
  "type": "POST",
  "url": sSource,
  "data": aoData,
  "success": fnCallback
  });
  }
  });
  }else{
  alert("Test");
  oTable.fnDraw();
  }
  
  
  });
  });
  [/code]
  
  When the submit button is clicked, browser alerts "test", but I see no data being sent from Firebug, can you help me with this?
  
  Thank you so much!
  
  Best Regards,
  
  Gerard.
• fbas Posts: 1,094Questions: 4Answers: 0

  July 2011 edited July 2011

  Can you post a link to your page?
  
  Or view the debugger under XHR. You can view the headers, response, JSON, etc. to see what's up
  http://i.imgur.com/VnNXs.png (screen capture of FireBug)
• allan Posts: 63,280Questions: 1Answers: 10,425 Site admin

  July 2011

  It would be worth adding in an alert or console.log just before your $.ajax call to see what value $('#from').val() and its friend are.
  
  Allan
• learner91 Posts: 7Questions: 0Answers: 0

  July 2011 edited July 2011

  Thank you allan and fbas!
  
  I'm currently doing the code in localhost.
  
  I did try to alert and log the value of 'from' and 'to' to the console, all are displayed
  [code] alert($('#from').val());
  alert($('#to').val());
  console.log($('#from').val());
  console.log($('#to').val());[/code]
  
  http://i179.photobucket.com/albums/w293/blackstorm_9x/log-1.jpg
  
  Like I said, the table did display for the 1st round, from 2nd round, there is no data sent to the server
  
  Thank you for helping me!
  
  Gerard.
• allan Posts: 63,280Questions: 1Answers: 10,425 Site admin

  July 2011

  Erm - what second time? You aren't reloading the Ajax data in that code, nor are you using server-side processing? It's just a one shot Ajax pull of all the data required - so a second Ajax request isn't needed. fnDraw in this case just redraws that table - it doesn't get new data (for that you would want the fnReloadAjax plug-in).
  
  Allan
• learner91 Posts: 7Questions: 0Answers: 0

  July 2011

  I can reload my data with fnReloadAjax now.
  
  Thank you so much!
  
  Best Regards,
  
  Gerard.