Replies

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

  April 2011

  How are you planning on doing the second page - is it an actual link (with perhaps a GET parameter)? If so, perhaps save saving is what you want (bStateSave). When the use hits the browser back button from the second page, then it will reload the state of the table from the time when the link was hit.
  
  Alternatively, you might consider a lightbox approach. When the name is clicked a lightbox would appear with the detailed information. Or you could consider using fnOpen / fnClose to show / hide detailed information about an employee, effectively attaching the details row to the employee - like this: http://datatables.net/examples/api/row_details.html .
  
  Hope this helps,
  Allan
• jimdgar Posts: 10Questions: 0Answers: 0

  April 2011

  Allan, thanks for the quick response.
  
  Yes, the 2nd page is spawned by a link passing the id of the row (../page2.php?id=267, for example). The id is the actual index from mySQL which allows page 2 to easily load the data from mySQL.
  
  I am using bStateSave and it works fine. Once the user views data on page 2 there's a link to go back to page 1 (or use browser back), where (because of bStateSave) they see filtered rows again.
  
  My goal is to save the user a couple of steps. Instead of returning to page 1, finding the next row and clicking the link back to page 2, I'd like to be able to jump to the next row's data directly from page 2. I'm not above using a crude method. So, for instance, after DataTables sorts the rows, if I could fill an array of indexes for filtered rows 1 thru n, I could pass this array to page 2 and reference that array for the stepping. Just one idea.
  
  If you think there's a hook I could use to do this please let me know. I do like the lightbox idea and might have to use it, but page 2 is already complete and functional so I'd like to just add this extra function if possible.
• allan Posts: 63,400Questions: 1Answers: 10,452 Site admin

  April 2011

  I see what you mean - thanks for the explanation. There isn't a hook for this in DataTables as such - at least not on the second page, since of course the table doesn't really exist any more. What you could do when generated the page2.php URL is to have something like id?=1&seq=2,3,4,5,6 etc. Then your second page has a comma separated list which is can shift the first element off the list, use it as the 'next' and then give the remainder of the list to the next page for it's own 'next'. This will also allow you do decide if you need to show a 'next' button or not.
  
  There is a plug-in API method ( http://datatables.net/plug-ins/api#fnGetColumnData ) which I think will be useful in this case. Assuming that your IDs are in the table, then you could generate the seq list using this (might need a little modification to get to the start point of the array from the clicked row).
  
  Regards,
  Allan
• jimdgar Posts: 10Questions: 0Answers: 0

  April 2011

  Allan,
  
  This looks like it will work for me. Can you give me an example of how/where I would call fnGetColumnData?
  
  Thanks
• allan Posts: 63,400Questions: 1Answers: 10,452 Site admin

  April 2011

  It is used in the example here: http://datatables.net/examples/api/multi_filter_select.html .
  
  Allan
• jimdgar Posts: 10Questions: 0Answers: 0

  April 2011

  OK, fnGetColumnData works fine during initialization, as in line 36 below. Now I need to call it every time the table is updated. But adding line 21 in my code below not only doesn't return any data, it also disables the thead filtering. The fnGetColumnData function is extracted directly; I have not changed anything.
  
  I'm a newcomer to jscript & jquery, so pardon my ignorance.
  
  
  var asInitVals = new Array();
  $(document).ready(function() {
  var oTable = $('#apps_table').dataTable( {
  "aaSorting": [[ 1, "asc" ]],
  "aLengthMenu": [[10, 25, -1], [10, 25, "All"]],
  "bStateSave": true,
  "oLanguage": {
  "sSearch": "Search all columns:"
  },
  "sDom": '<"topl"f><"topr"p>rt<"bottoml"i><"bottomr"l><"clear">',
  "fnInitComplete": function() {
  var oSettings = this.fnSettings();
  for ( var i=0 ; i0) {
  $("thead input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
  $("thead input")[i].className = "";
  }
  }
  },
  "fnDrawCallback": function () {
  var appList = oTable.fnGetColumnData(0); /* doesn't work here & disables filtering capability */
  }
  } );
  
  $("thead input").keyup( function () {
  /* Filter on the column (the index) of this element */
  oTable.fnFilter( this.value, $("thead input").index(this) );
  } );
  
  /*
  * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
  * the footer
  */
  $("thead input").each( function (i) {
  asInitVals[i] = this.value;
  var appList = oTable.fnGetColumnData(i); /* works OK here */
  } );
  
  $("thead input").focus( function () {
  if ( this.className == "search_init" ) {
  this.className = "";
  this.value = "";
  }
  } );
  
  $("thead input").blur( function (i) {
  if ( this.value == "" ) {
  this.className = "search_init";
  this.value = asInitVals[$("thead input").index(this)];
  }
  } );
  } );
• allan Posts: 63,400Questions: 1Answers: 10,452 Site admin

  April 2011

  The first table that fnDrawCallback is called is before oTable has fully initialised (i.e. before the dataTable() function has fully run). Thus oTable will be undefined and you'll be getting a Javascript error in the console saying as much.
  
  The fix is to simply use 'this' rather than oTable in the callback. The DataTables callback functions execute with the DataTables instance scope, so:
  
  [code]
  "fnDrawCallback": function () {
  var appList = this.fnGetColumnData(0); /* doesn't work here & disables filtering capability */
  }
  [/code]
  should do it for you.
  
  Allan