Replies

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

  July 2011

  Hi javilmer,
  
  When you say:
  
  > - how not to initially load the datatables,
  
  do you mean that you don't want the table initially visible, or you want the table initially visible, but empty? Do make it hidden initially you could just have a display:none on the div.dataTable_wrapper class. When when you load data into the table you would make this display:block. If you want to have the table initially visible but empty, you just need to make sure that there are no TR rows in the TBODY and you aren't loading any data by Ajax.
  
  > - how to combine the fnServerData or something else to load the table with an onclick button
  
  What is the data source you are using the for table - i.e. are you using sAjaxSource? How about bServerSide? What you might want to consider doing is not having DataTables doing the Ajax work for you (assuming you are not using server-side processing) but rather use the DataTables API to add / delete data from the table. For example whenever you need to load data, you you use $.ajax as usual, then in the "success" callback you would use fnAddData ( http://datatables.net/api#fnAddData ) to add the new data to the table. You could also use fnClearTable to delete any old rows so they are replaced.
  
  > - how to pass the parameters to the Ajax page.
  
  If you do what you use fnServerData (which is a perfectly valid way of doing it - there are quite a lot of ways of addressing what you are looking at) then how to add parameters is shown on this page: http://datatables.net/release-datatables/examples/server_side/custom_vars.html . That is specifically for server-side processing, but the same will work for client-side processing with Ajax sourced data.
  
  Regards,
  Allan
• javilmer Posts: 2Questions: 0Answers: 0

  July 2011

  Hello,
  I want the table initially empty, as I dont't know yet what criterias the user is going to choose, so it does not make sense to display any data. I want to display the (appropriate) datas when he has chosen criterias and clicked submit.
  
  I can use the datasource I want, I'll follow your advice, knowing that the datas can takes up to 5 to 10 seconds to get from Database.
  
  So in the perfect world :
  - the user sees a page with a couple of criteria to select on the top of the page,
  - he selects what he needs (product types for instance),
  - he clicks submit,
  - under the criteria, then display something like "loading results"
  - then the lists appears, in the datatable of course.
  Of course all this without any page reload.
  
  Any help greatly appreciated
  Jean
• GregP Posts: 500Questions: 10Answers: 0

  July 2011 edited July 2011

  Hi Jean,
  
  I think the functions Allan mentioned are already the ones I would use. The only thing you need to do is decide how to pass the parameters during your Ajax call.
  
  When you use jQuery's .ajax() method, there is a parameter called "data" which will allow you to set your two parameters collected in the fields. So, let's say for example that both of those fields are input tags with the class "searchCriteria" and you have a submit button with the id "submitButton" it would look something like (excluding DataTables initializations):
  
  [code]
  // just a quick way of mocking up getting the search terms
  var myCriteria = "searchCriteria=";
  
  $('input.searchCriteria').each(function() {
  myCriteria += $(this).text();
  myCriteria += ",";
  });
  myCriteria.slice(0, -1); //JSBin didn't cut off the last comma, but this SHOULD work
  
  $('#submitButton').click(function() {
  $.ajax({
  url: 'myServerScript.php',
  dataType: 'json',
  data: myCriteria,
  success: function (data) {
  processData(data);
  }
  });
  });
  
  function processData(data) {
  // 'data' is the returned JSON. Do what you need to do with it using
  // fnAddData or fnServerData.
  }
  [/code]