Replies

• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012

  Off the top of my head, I'm afraid I don't know. I'm working on a remote debugging right now that will hopefully help with this kind of thing, but are you able to give me a link to your page? What you've got above looks absolutely fine!
  
  Thanks,
  Allan
• sd_zuo Posts: 78Questions: 1Answers: 0

  February 2012 edited February 2012

  I am sorry that the page is in a private network thus it can't be linked to.
  
  I used FireBug to track down the code, and sorted the table.
  
  At the moment before the "Requested Unknown Parameter" poping up from the _fnGetCellData function, I saw that the aoData in the function, which was supposed to look like an item of the "letterList" array were actually quite different.
  The first item of aoData was changed to "undefined", thus the _fnGetCellData failed. However, the source array, in fact, had all items defined.
  
  The problem must be lurking in the sorting part.
  You can see that the first column has used customized sorting.
  [code]
  sSortDataType: "dom-checkbox"
  [/code]
  
  It appears that before the sorting plug-in returns the value for sorting, the first item of aoData is undefined.
  
  The DOM sorting code was taken from your web site. [code]
  $.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
  {
  var aData = [];
  $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( this.checked ? "0" : "1" );
  } );
  return aData;
  };
  [/code]
  
  When I was using 1.8, there was no such an issue.
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012

  What is the data source that you are using? My example using DOM data source appears to be working no problem: http://datatables.net/release-datatables/examples/plug-ins/dom_sort.html . I can't think off the top of my head why Ajax sourced data would cause it a problem, since initially there would be zero rows, and then the rows that are defined by the data source.
  
  Allan
• sd_zuo Posts: 78Questions: 1Answers: 0

  February 2012 edited February 2012

  I managed to reproduce this thing with relatively some smaller code snippets.
  Please save the following two files as sample.htm and sample.js respectively and sort the table by clicking the header. The problem appears to be random if the input data array is small. Please try more times or reload the page and the issue will occur.
  
  HTML file:
  [code]
  Test
  
  
  
  
  var mailbox = "draftbox";
  $.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
  {
  var aData = [];
  $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( this.checked ? "0" : "1" );
  } );
  return aData;
  };
  var letterList = [
  [197988,"A1","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A2","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A3","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A4","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A11","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A12","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A13","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A14","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A21","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A22","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A23","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A24","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A31","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A32","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A33","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A34","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A41","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A42","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A43","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A44","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A51","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A52","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A53","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A54","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A61","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A62","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A63","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A64","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A71","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A72","B","","2011-03-30 11:17:42",-1,1],
  [197988,"A73","B","","2011-05-09 11:07:41",-1,1],
  [193133,"A74","B","","2011-03-30 11:17:42",-1,1]
  ];
  
  
  
  
  
  [/code]
  
  And the sample.js file:
  
  [code]
  function ClickToSelectLetter (/*event*/ ev) {
  if ($(ev.target).is("a")) {
  return ;
  }
  var c = $(this).find("td:eq(0) input:checkbox").get(0);
  if (ev.target != c) {
  c.checked = !c.checked;
  }
  $(this).toggleClass("DG_Selected", c.checked);
  var t = $(this).parents("table:first")
  var a = t.data("Selection");
  var sc = t.parent().find(".SelectedLetterCount");
  var i = a["i"+c.value];
  if (c.checked && !i) {
  a["i"+c.value]=c.value;
  sc.text(parseInt(sc.first().text())+1);
  }
  else if (!c.checked && i) {
  a["i"+c.value]=null;
  sc.text(parseInt(sc.first().text())-1);
  }
  if (ev.target != c) {
  ev.preventDefault();
  }
  }
  function GetSelection (selector) {
  var s = [];
  var a = $(selector).data("Selection");
  $.each(a, function(i, n) { if (n) {
  s.push(n);
  }});
  return s;
  }
  $(function(){
  var mb = (typeof (mailbox) == "undefined") ? "inbox" : mailbox;
  var isOutbox = mb == "outbox";
  var isUnreadBox = mb == "mail-unread";
  var isDraftBox = mb == "draftbox";
  $("#LetterList").data("Selection", {});
  $("#LetterList").dataTable({
  aaData: letterList,
  bJQueryUI: true, sPaginationType: "full_numbers", sDom: '<"H"<".LetterMenu">frp>t<"F"il<".LetterMenu">>',asStripClasses: [],
  bAutoWidth: false, bPaginate: true, aaSorting: [],
  bStateSave: true,
  bDeferRender: true,
  iDisplayLength: 25, aLengthMenu: [[25, 50, 100], [25, 50, 100]],
  aoColumnDefs: [
  { mDataProp: 0, aTargets: [0], sTitle: "A", sWidth: "30pt", sSortDataType: "dom-checkbox", bUseRendered: false, fnRender: function (o) {
  return "";
  } },
  { mDataProp: 5, aTargets: [1], sTitle: "B", sWidth: "30pt", bUseRendered: false, fnRender: function (o) {
  return "";
  } },
  { mDataProp: 1, aTargets: [2], sTitle: "C", sType: "string" },
  { mDataProp: 2, aTargets: [3], sTitle: (isOutbox || isDraftBox) ? "X" : "Y", fnRender: function (o) {
  if (o.aData[2] != o.aData[3] && o.aData[3] != "") {
  return o.aData[2] + "(" + o.aData[3] + ")";
  }
  return o.aData[2];
  } },
  { mDataProp: 3, aTargets: [4], sTitle: "D", bVisible: false },
  { mDataProp: 4, aTargets: [5], sTitle: "E", sWidth: "100pt" },
  { mDataProp: 6, aTargets: [6], sTitle: "F", sWidth: "40pt", bUseRendered: false, fnRender: function (o) {
  return "";
  } }
  ]
  });
  });
  
  [/code]
• sd_zuo Posts: 78Questions: 1Answers: 0

  February 2012

  Hello Allan,
  
  Could you reproduce this issue with the above code on your computer?
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012

  Hi,
  
  Sorry for the delay on this one - it required a bit more time for investigation. Basically the problem is that the method for calculating the DOM sorting on the checkboxes is not compatible with deferred rendering.
  
  What is happening is that the DOM checkbox 'get' runs, and on the first pass, due to the deferred rendering, it finds no TR elements and thus returns an empty array. DataTables assumed that the array returned is correct, runs over each row and sets the value based on the returned value (which is undefined in this case). Hence the issue.
  
  So the change I've committed to DataTables is to give an error when the returned array does not match that which is expected (I did think about just checking for undefined array values, but the indexes of the returned array might not match the data source index).
  
  Ultimately there are two ways to address the issue you are having here:
  
  1. Modify the DOM sorting function to write a value for every row, regardless of if the node has been created or not.
  
  2. Disable deferred rendering.
  
  Allan
• sd_zuo Posts: 78Questions: 1Answers: 0

  February 2012

  Hello Allan,
  
  Thanks for the investigation and reply.
  I'd forgotten that I added the deferred rendering feature to the initialization code.
  I will try to cope with this issue.
  
  Thank you again for the detailed explanation.
• skanne Posts: 2Questions: 0Answers: 0

  February 2012

  Hi Allan,
  
  I have the same problem after upgrading. But here I don't use the deferred rendering at all. I pull in the data via AJAX and pass the returned JSON data to the aaData option that is called with .dataTable() on a freshly DOM-appended, empty table. After displaying the alert the table is rendered nevertheless and seems to be fully functional.
  
  ???
  
  Sven
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012

  Hi Sven,
  
  Could you try using my new DataTables debugger to give me some information about the table please: http://debug.datatables.net . Just run the bookmarklet on your page and let me know what the six character code is.
  
  Allan
• iamwyza Posts: 6Questions: 0Answers: 0

  February 2012

  I'm having the same problem. 1.9.0. http://debug.datatables.net/okejoz
  
  The error i get is: DataTables warning (table id = 'tblStreams'): Requested unknown parameter 'IsDigest' from the data source for row 0
  
  below is the sorting functions that are being registered as well (I didn't see them as part of the debug info)
  [code]
  $.fn.dataTableExt.afnSortData['dom-select'] = function (oSettings, iColumn) {
  var aData = [];
  $('td:eq(' + iColumn + ') select', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
  aData.push($(this).val());
  });
  return aData;
  };
  
  $.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
  var aData = [];
  $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
  aData.push(this.checked == true ? "1" : "0");
  });
  return aData;
  };
  [/code]
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012

  Thanks for the debug record - there is something a bit odd going on. Although the table has data in it, there is no record internally to the table of what the data is, or what the Ajax response was. What does the Ajax response look like (from Firebug)?
  
  Are you able to give me a link to the page?
  
  Allan
• skanne Posts: 2Questions: 0Answers: 0

  February 2012 edited February 2012

  Hi Allan,
  
  Sorry, but I can't use the DataTables debugger, since I am running it in a closed environment.
  
  Meanwhile, I've fixed the problem by changing the way I display specific-type columns (here: for dates/times and file sizes, which need the plain data for sorting, but a formatted string for display). I used to have a purposely invisible extra column for the original data and another column for the displayed and formatted data. Now I use the attribute [code]bUseRendered: false[/code] without an extra column. And this did the trick.
  
  See the commented lines for how it used to be.
  
  [code]
  // init columns for use in aoColumns
  for (var i = 0, l = tableProperties.length; i < l; i++) {
  var prop = tableProperties[i],
  title = ''+getString(prop.replace(/·/g, '.'))+'';
  
  filters[prop] = {
  col: columns.length,
  val: ''
  };
  
  if (types[prop] === 'date') {
  // columns.push({mDataProp:prop, sType:'string', bVisible:false});
  // columns.push({sTitle:title, iDataSort:filters[prop].col, fnRender:dateRenderer(prop)});
  columns.push({sTitle:title, mDataProp:prop, fnRender:dateRenderer(prop), bUseRendered:false, sType:'string'});
  } else if (types[prop] === 'datetime') {
  // columns.push({mDataProp:prop, sType:'string', bVisible:false});
  // columns.push({sTitle:title, iDataSort:filters[prop].col, fnRender:dateTimeRenderer(prop)});
  columns.push({sTitle:title, mDataProp:prop, fnRender:dateTimeRenderer(prop), bUseRendered:false, sType:'string'});
  } else if (types[prop] === 'filesize') {
  // columns.push({mDataProp:prop, sType:'numeric', bVisible:false});
  // columns.push({sTitle:title, iDataSort:filters[prop].col, fnRender:fileSizeRenderer(prop), sClass:'rightAlign'});
  columns.push({sTitle:title, mDataProp:prop, fnRender:fileSizeRenderer(prop), bUseRendered:false, sType:'numeric', sClass:'rightAlign'});
  } else if (types[prop] === 'email') {
  columns.push({sTitle:title, mDataProp:prop, fnRender:emailRenderer(prop)});
  } else if (types[prop] === 'url') {
  columns.push({sTitle:title, mDataProp:prop, fnRender:urlRenderer(prop)});
  } else if (types[prop] === 'image') {
  columns.push({sTitle:title, mDataProp:prop, fnRender:imageRenderer(prop)});
  } else if (types[prop] === 'boolean') {
  columns.push({sTitle:title, mDataProp:prop, fnRender:booleanRenderer(prop), sClass:'centerAlign'});
  } else {
  columns.push({sTitle:title, mDataProp:prop});
  }
  }
  
  /*snip*/
  
  $listTable = $('');
  
  // ... and make it a dataTable
  $listTable.appendTo($list).dataTable({
  bAutoWidth: false,
  sDom: '<"listControlTop"fl>t<"listControlBottom"pi>',
  oLanguage: VWR.rb.oLanguage,
  aaData: json.data,
  aaSorting: sorting || [],
  aoColumns: columns,
  sPaginationType: 'full_numbers',
  aLengthMenu: (function _aLengthMenu() {
  if (!$.isArray(VWR.tableLengths)) return false;
  var lengths = [[],[]];
  for (var i = 0, l = VWR.tableLengths.length; i < l; i++) {
  var tl = VWR.tableLengths[i];
  lengths[0].push(tl);
  lengths[1].push(tl == -1 ? VWR.rb.oLanguage.sLengthMenuShowAll : tl);
  }
  return lengths;
  })() || [10, 25, 50, 100],
  iDisplayLength: VWR.tableDefaultLength || 10,
  fnDrawCallback: function _fnDrawCallback() {
  $listTableLoading.remove();
  $('.details', VWR.id).empty();
  }
  });
  [/code]
  
  By the way: you are a genius providing the excellent, feature-rich DataTables to us unworthy developer community! Keep on rocking!
  
  Regards,
  Sven
• iamwyza Posts: 6Questions: 0Answers: 0

  February 2012

  Here is the data that is sent along the AJAX request.
  [code]
  { "d" : { "aoData":[{"Id":"617fec42-b9f8-4750-bbe5-a0000101892e","Name":"Monsieur Rodgers Arrondissement:Blog","Type":1,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"9358c6b1-8c6c-47fa-8203-a0000101893c","Name":"Test Group J:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"f77b5e52-d6c6-41d5-8dff-a0000101893c","Name":"Jason Ackman Open:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"3df43166-a77e-4612-8fc7-a0000101893c","Name":"test2:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"72348e81-a662-47a8-935e-a0000101893c","Name":"Jane Hogue Open:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"9a9cebe2-0918-45f9-9408-a0000101893c","Name":"Rob Myers:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"188fc53a-fb28-4e3b-a1db-a0000101893c","Name":"Jason Ackman Invite:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"3fab8a43-df44-43a5-a670-a0000101893c","Name":"Francophiles:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"738cb389-e4c2-4c9f-a94c-a0000101893c","Name":"Harolds BFF:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"9d32d801-1f98-46f9-ab25-a0000101893c","Name":"Monsieur Rodgers Arrondissement:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"c0ad3639-f7e5-4d2d-b03f-a0000101893c","Name":"Rob Myers Gen Ed Committee:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"6c409262-cb22-4830-b3f0-a0000101893c","Name":"Cinema Francais:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"7f0c785e-f5ea-444e-b47a-a0000101893c","Name":"Exmaple Group:Announcments - Blogy","Type":1,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"5ab5dbb3-3bb9-4ab6-b6bd-a0000101893c","Name":"Exmaple Group:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null},{"Id":"479b1586-050f-4114-bf7f-a0000101893c","Name":"Jason Ackman Invite:ForumsGeneral:Open Discussion","Type":2,"RssFeedLocation":null,"RssFeedValid":false,"IsSubscribed":false,"IsDigest":false,"DisplayType":null}] } } [/code]
• iamwyza Posts: 6Questions: 0Answers: 0

  February 2012

  Bump
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012 edited February 2012

  @iamwyza: Have you told DataTables that the data is in d.aoData rather than the default aaData parameter of the JSON object using the sAjaxDataProp option? If not, then that's what to do. If yes, please use the debugger as I suggested to Sven and post your debug code here.
  
  Allan
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  February 2012

  For anyone else encountering this issue, I've just added an FAQ about it: http://datatables.net/faqs#unknown_parameter
  
  Allan
• iamwyza Posts: 6Questions: 0Answers: 0

  March 2012

  Allan, I posted the debug link earlier. But here it is again. The table generates fine, the issue occurs when attempting to do sorts on custom rendered columns.http://debug.datatables.net/okejoz
• iamwyza Posts: 6Questions: 0Answers: 0

  March 2012

  bump
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  March 2012

  Hi,
  
  Sorry for the delay. Thanks for the debug trace - from it I can see that the internal data stores are all completely empty for each row ("_aData": []) so DataTables, rightly can't read any data.
  
  I'm afraid I have no idea what would be causing that - I've not seen something quite like that before. Can you please give me a link to a test page showing the problem?
  
  Thanks,
  Allan
• sd_zuo Posts: 78Questions: 1Answers: 0

  May 2012

  I kept met with this issue.
  The deferred rendering does not seem to be the cause of this issue.
  The following initialization code, which does not use Deferred Rendering, can also reproduce the problem.
  [code]
  $("#Receivers").dataTable({
  aaData: $.grep(letter["Receivers"], function (n, i) {
  return n["Receiver"] != letter["Sender"];
  }),
  bJQueryUI: true, sPaginationType: "full_numbers", sDom: '<"H"p>t<"F"il>',asStripClasses: [],
  bAutoWidth: false, bPaginate: true, aaSorting: [], aLengthMenu: [[10, 20], [10, 20]],
  aoColumnDefs: [
  { aTargets: [0], mDataProp: "Receiver", sTitle: "RECV"},
  { aTargets: [1], sTitle: "Read Date", fnRender: function (o) {
  var r = o.aData["IsRead"];
  return r ? o.aData["ReadDate"] : "(Unread)";
  } }
  ]
  });
  [/code]
• allan Posts: 63,397Questions: 1Answers: 10,451 Site admin

  May 2012

  Can you run it through the debugger so I can see the state of the table please?
  
  Allan