Replies

• jcrawford Posts: 172Questions: 0Answers: 0

  April 2011 edited April 2011

  ok so i have this code, however it does not seem to work when i type in the text box with the id of #start_date
  
  
  Any thoughts why this would tell me that oTable.fnServerData() is not a function?
  
  oTable.fnServerData is not a function
  [Break On This Error] $('#start_date').keypress( function() { oTable.fnServerData(); } );
  
  [code]
  var oTable;
  $(document).ready(function() {
  oTable = $('#reports').dataTable( {
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "pages/tabledata/reports.php",
  "fnServerData": function ( sSource, aoData, fnCallback ) {
  /* Add some extra data to the sender */
  aoData.push( { "name": "start_date", "value": $('#start_date').val() } );
  aoData.push( { "name": "end_date", "value": $('#end_date').val() } );
  $.getJSON( sSource, aoData, function (json) {
  /* Do whatever additional processing you want on the callback, then tell DataTables */
  fnCallback(json)
  } );
  },
  "aoColumns": [
  { "sName": "date" },
  { "sName": "product" },
  { "sName": "sale_type" },
  { "sName": "sales_submitted" },
  { "sName": "sales_declined" },
  { "sName": "sales_successful" },
  { "sName": "billed_submitted" },
  { "sName": "billed_declined" },
  { "sName": "billed_submitted" },
  { "sName": "avg_days_back" }
  ]
  } );
  $('#start_date').keypress( function() { oTable.fnServerData(); } );
  } );
  [/code]
  
  Any thoughts why this would tell me that oTable.fnServerData() is not a function?
  
  oTable.fnServerData is not a function
  [Break On This Error] $('#start_date').keypress( function() { oTable.fnServerData(); } );
  
  Thanks,
  Joseph Crawford
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  April 2011

  Easy answer is "cos it's not" :-). The more complex answer is that fnServerData is not exposed as part of the public API - it's an initialisation parameter, but not a callable function. All you need to do is call fnDraw() which will redraw the table - thus kicking the internal fnServerData.
  
  Allan
• Alawrence Posts: 18Questions: 0Answers: 0

  April 2011

  We did this using Jquery Datepicker and simply pass the values to the data source.
  
  [code]
  
  aoData.push( { "name": "datefrom", "value": document.getElementById('from').value} );
  aoData.push( { "name": "dateto", "value": document.getElementById('to').value} );
  
  [/code]
  
  Then in the Datepicker function call we simply added :
  [code]
  if ((document.getElementById('from').value !=='From') && (document.getElementById('to').value !=='To')){
  oTable.fnFilter(document.getElementById('cname').value);
  }
  [/code]
  
  This way each time the date selection was made it triggered the data refresh. But as with everything there are many ways to pull it off this just happened to be what worked for us. Hopefully it leads you to a solution
• Eric_DeCoff Posts: 8Questions: 0Answers: 0

  January 2012

  Ok here is what I did to use jquery datepicker plugins ( Notice I use #pricing instead of #example)
  
  [code]
  $('#pricing').dataTable({
  "aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3,5 ] } ],
  rest of your take setup here
  });
  [/code]
  
  Next setup handling
  
  [code]
  // select everything when editing field in focus
  $('#pricing tbody td input').live('focus', function (e){
  $(this).select();
  });
  
  // attach datepicker on focus and format to return yy-mm-dd
  $('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
  $(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
  });
  
  // override normal blur function ( needed for date month switching )
  $('#pricing tbody td input').live('blur', function (e){
  return false;
  });
  
  // set change function to handle sumbit
  $('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
  $(this).parents("form").submit();
  });
  
  [/code]