Replies

• kevinliu Posts: 5Questions: 0Answers: 0

  July 2010

  Allan,
  
  I just tried the beta4, and found something like a bug. It's similar to the issue mentioned on http://datatables.net/forums/comments.php?DiscussionID=2221&page=1. It happened to me when I change page length from 10 to 25, then back to 10, update datatable value, then click the next button, then I got a javascript error: "j is undefined' in line [code]var j = a.ao...j++) o == a.aoOpenRows[j].nParent && [/code]. I use dom data resource.
  
  I tried to track the error in the script then found when a._iDisplayStart or a._iDisplayEnd should have a value of 10, they are set to '010'. This causes some if conditions containing these two variables have wrong value. I can see "Showing 1 to 010 of 29 entries".
  
  I found a piece of code probably responsible for the wrong a._iDisplayEnd value. In C(a) function, when a._iDisplayStart = 10, a._iDisplayLength =10, a.aiDisplay.length = 29, the following code is supposed to deliver 20, but it delivers 29, since it gets value 010 from "a._iDisplayStart+a._iDisplayLength"
  
  [code]a._iDisplayStart+a._iDisplayLength>a.aiDisplay.length||a._iDisplayLength==-1?a.aiDisplay.length:a._iDisplayStart+a._iDisplayLength[/code]
  
  Thanks,
  Kevin
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  Hi Kevin,
  
  Interesting one! Thanks for posting about it - I completely missed the earlier thread you pointed out! This would occur if either _iDisplayStart or _iDisplayLength is a string rather than a number - which shouldn't be the case... Do you have any custom initialisation code being used, or is it just a straight forward $(...).dataTable(); ?
  
  Thanks,
  Allan
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  I've just noticed that the package I put up for 1.7 beta 4 originally had a 'beta 3' tag in the comment of the minified version (the non-minified one was correct). I've put a new package which corrects this error, but someone you who downloaded this package already may have an incorrect comment there. The code is version 1.7 beta 4, it's just the comment that is wrong as a result of a packaging error.
  
  Regards,
  Allan
• kkudi Posts: 77Questions: 0Answers: 0

  July 2010 edited July 2010

  Hi Allan,
  
  The alignment issue I have posted on with an attachment back in a previous post has not been fixed by beta 4.
  
  Although I have noticed stability when scrolling vertically with regards to the column headers, the alignment in the cells for the last columns is still bad.
  
  See picture to remember issue :
  
  http://img191.imageshack.us/img191/5972/alignmentissue.jpg
  
  Thanks
  Andreas
• kkudi Posts: 77Questions: 0Answers: 0

  July 2010

  Also, when a table is initialized with no data, but with column headers, the scroll bar ( horizontal is not visible).
  
  When data is added, scrollbar is visible. Is this a bug?
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  Hi kkudi,
  
  Can you post a link with an example that has the column widths not working please? It would be good to have example data for what is causing this to fail, as it has worked in the various test cases I've thrown at it.
  
  With regard to the second part - possibly... Have you set sScrollXInner to be greater than the width of the scrolling container? Again a link would be useful.
  
  Allan
• kkudi Posts: 77Questions: 0Answers: 0

  July 2010 edited July 2010

  Hi Allan,
  
  I have sent you a msg via datatables.net/contact.
• kkudi Posts: 77Questions: 0Answers: 0

  July 2010

  Have sent the information you requested Allan.
  
  Thanks
  Andreas
• dzida Posts: 23Questions: 0Answers: 0

  July 2010 edited July 2010

  Unfortunetly I also face the problem with columns alignment in my code.
  
  Here is the code I use:
  [code]
  oTable = $('#myTable').dataTable( {
  "oLanguage": {
  "sUrl": "/site_media/language/pl_PL.txt"
  },
  "sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
  "sPaginationType": "full_numbers",
  "bProcessing": true,
  "bServerSide": true,
  "bAutoWidth": false,
  "sScrollX": "100%",
  "bScrollCollapse": true,
  "bJQueryUI": true,
  "sAjaxSource": "/data",
  "aoColumns" : [
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  { "bSortable": false },
  { "bSortable": false },
  { "bSortable": false }
  ]
  } );
  [/code]
  
  and here is the result: http://yfrog.com/05datatablesbugp
  
  I've tried to set sScrollXInner - columns are aligned fine in this case but there is no scrollbar visible.
  
  UPDATE:
  I've also noticed related issue (I think so at least:)). Setting custom width to column ({"sWidth": "200px"}) looks fine on an empty table. After data is retrieved from server given width is lost and table looks like on example I posted previously. Looks like there is something broken with methods related to drawing table for bServerSide:true.
• kevinliu Posts: 5Questions: 0Answers: 0

  July 2010

  Allan,
  
  I am following the "a._iDisplayStart and a._iDisplayEnd" issue I raised. I don't have custom initialisation, but have code to remove and recreate datatable, and I didn't use fndestroy function, it doesn't work for my ie7 for some reason, although works perfect in firefox. I paste my code as below:
  
  [code]
  
  
  
  var oTable;
  var displayLength;
  var displayStart;
  
  $(function () {
  refreshTable();
  });
  
  function refreshTable() {
  
  // before creating a table, make sure it is not already created.
  // And if it is, then remove old version before new one is created
  if ($("#stakeholders")) {
  // contains the dataTables master records
  var s = $(document).dataTableSettings;
  
  if (s != undefined) {
  var len = s.length;
  for (var i = 0; i < len; i++) {
  // if already exists, remove from the array
  if (s[i].sInstance = "stakeholders") {
  s.splice(i, 1);
  $("#stakeholders").siblings("#stakeholders_length").remove();
  $("#stakeholders").siblings("#stakeholders_filter").remove();
  $("#stakeholders").siblings("#stakeholders_info").remove();
  $("#stakeholders").siblings("#stakeholders_paginate").remove();
  $("#stakeholders").unwrap();
  }
  }
  }
  }
  
  //initial 10 records each page
  if (displayLength == undefined) {
  displayLength = 10;
  }
  if (displayStart == undefined) {
  displayStart = 0;
  }
  
  oTable = $('#stakeholders').dataTable(
  { "iDisplayLength": displayLength,
  "iDisplayStart": displayStart
  }
  );
  
  var nNodes = oTable.fnGetNodes();
  if (nNodes.length < displayStart) {
  displayStart = nNodes.length;
  }
  setDataTableControlEvents();
  }
  
  function setDataTableControlEvents() {
  
  $("#stakeholders_length").change(function () {
  
  displayLength = $("#stakeholders_length option:selected").text();
  if (displayStart < displayLength) {
  displayStart = 0;
  }
  else if (displayStart % displayLength != 0) {
  displayStart = Math.abs(displayStart / displayLength) * displayLength;
  
  }
  })
  $("#stakeholders_previous").click(function () {
  if (parseInt(displayStart) >= parseInt(displayLength)) {
  displayStart = parseInt(parseInt(displayStart) - parseInt(displayLength));
  }
  else {
  displayStart = 0;
  }
  })
  $("#stakeholders_next").click(function () {
  displayStart = parseInt(displayStart) + parseInt(displayLength);
  })
  }
  
  
  
  
  
  ......
  
  
  
  [/code]
  
  I am using asp.net mvc ajax to update the "stakeholders" div.
  
  Thanks,
  Kevin
• kevinliu Posts: 5Questions: 0Answers: 0

  July 2010

  Allan,
  
  If I use fnDestroy function, my code becomes like following:
  
  [code]
  
  
  
  var dataTable;
  
  $(document).ready(function () {
  dataTable = $('#stakeholders').dataTable();
  });
  
  function refreshTable() {
  var displayStart = dataTable.fnSettings()._iDisplayStart;
  var displayLength = dataTable.fnSettings()._iDisplayLength;
  var sorting = dataTable.fnSettings().aaSorting;
  
  dataTable.fnDestroy();
  dataTable = $('#stakeholders').dataTable({
  "iDisplayStart": displayStart,
  "iDisplayLength": displayLength,
  "aaSorting": sorting
  });
  
  }
  
  
  
  [/code]
  
  It works fine in Firefox, but in my ie7, Javascript error "'className' is null or not an object" will pop up when I update "stakeholders" div with ajax. I have cleared browser cache.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  Issue: Scrolling alignment - thanks for all of the information provided about this! It's made it much easier to track down what is going on and I believe I understand the issue quite well now. A new beta will be forthcoming, hopefully fairly soon, which will address this.
  
  Issue: _iDisplayStart as a string - to narrow down the issue, it would be interesting to know if it is the start or end number which is typed as a string. Could you add 'console.log( typeof a._iDisplayStart, typeof a._iDisplayLength );' into the code where the error be being triggered. I can't see anywhere in DataTables that this type error would occur, but then I don't see it on a quick scan of your code either. I presume you can't reproduce the issue without your DataTables manipulation code?
  
  Issue: fnDestroy - I knew I'd forgot something. Sorry. I'll fire up a copy of IE7 before making the next beta release which will then address this. You could pass '"bDestory":true' as an initialisation parameter, rather than calling fnDestroy yourself - same effect.
  
  Allan
• kkudi Posts: 77Questions: 0Answers: 0

  July 2010

  Allan, with regards to the horizontal scroll bar visibility when there's no data, I have also found that using "sScrollXInner" solves the problem and spaces out the columns accordingly.
  
  The alignment issue is not eliminated but it's somehow improved. ( by using "sScrollXInner")
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  @kevinliu: I think I've just realised what the problem is that you are seeing with the '010' issue. Your displayLength variable is a string, not a number:
  
  [code]
  displayLength = $("#stakeholders_length option:selected").text()
  [/code]
  It needs a parseInt() on it. So not an issue with DataTables thankfully :-). There is however the issue about fnDestroy which I'm just looking at.
  
  Allan
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  @kevinliu: I've been unable to reproduce the error with fnDestroy unfortunately. It appears to work exactly as expected for me in IE6, 7 and 8. If you have the IE Javascript debugger available, it would be very useful to know what which point in the code it is breaking.
  
  Allan
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  @all:
  
  Beta 5 is now available - which will hopefully address the scrolling alignment issue: http://datatables.net/forums/comments.php?DiscussionID=2293
  
  Allan
• kevinliu Posts: 5Questions: 0Answers: 0

  July 2010

  Hi Allan,
  
  Thanks for pointing out the error for the "010" issue. After I Parseint() it, it works now. I am also confused with my ie7 issue, will have a check on other machine later.
  
  Regards,
  Kevin
• taelor Posts: 20Questions: 0Answers: 0

  July 2010

  Hey Allan,
  
  Thanks for the speedy reply on the visible columns issues regarding strings vs. ints.
  
  I do have another question. I am upgrading our datatables from version 1.5.6 to the new beta 4 and have noticed some considerable amount of slow down when hiding/showing columns dynamically. Well actually the hide is just fine, its the reshowing of that data that I get a Unresponsive Script warning. I have two exact same sets of data in two different tables (one using 1.5.6 the other 1.7b4).
  
  the only difference in the code I can find (I dont know if this is new for 1.7) is...
  
  NEW
  [code]
  oSettings.aoData[i].nTr.insertBefore( nTd, $('>td:eq('+iBefore+')', oSettings.aoData[i].nTr)[0] );
  [/code]
  
  OLD
  [code]
  oSettings.aoData[i].nTr.insertBefore( nTd, oSettings.aoData[i].nTr.getElementsByTagName('td')[iBefore] );
  [/code]
  
  
  one thing I will say is that we are using jQuery 1.3.something, which could be the problem (I know they dramatically improved the internals for the selectors right?)
  
  but I do know that its always faster to just use straight up javascript when possible as opposed to jQuery selectors. Now I am unfamiliar with the '>td:eq(x)' syntax, does that mean, "give me all the td's greater than the ones equal to this one with the id of x?"
  
  got any suggestions?
• taelor Posts: 20Questions: 0Answers: 0

  July 2010

  btw, mokey patching to the old style of code definitely fixes the problem
• taelor Posts: 20Questions: 0Answers: 0

  July 2010

  and so does upgrading to jQuery 1.4.2
  
  I would definitely suggest upgrading to 1.4.2 if going to the new datatables. $)
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2010

  Hi taelor,
  
  Good to hear that moving to jQuery 1.4.2 does the trick for you. I'd have been reluctant to go back to the old way of doing it as the new method takes sub-tables into consideration, where as the old one would get things horribly wrong if you had nested tables, and used this method. The getElementsByTagName could return nodes from the nested table, and then DataTables would remove that.
  
  So - upgrading to jQuery 1.4.2 is the way to go :-)
  
  Regards,
  Allan