Answers

• jr42.gordon Posts: 305Questions: 2Answers: 49

  February 2016 edited February 2016

  First, you need to use only one, "columnDef" or "aoColumns", as they ultimately serve the same function.

  Second, if you use "columnDef", "targets" starts at 0.

  Third, the "-asc" and "-desc" will never fire since you included "-pre", but luckily in your case you don't need them and can just use "-pre".

  Make these changes and let me know if it resolves your issue.
• jr42.gordon Posts: 305Questions: 2Answers: 49

  February 2016

  Here is a link to a discussion discussing "-pre", "-asc", "-desc", and an explanation of their function and relationship by Allan.

  http://datatables.net/forums/discussion/comment/88294/#Comment_88294
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  February 2016

  SCRIPT5007: Unable to get property 'defaults' of undefined or null reference

  Sounds like you might be loading jQuery twice on your page or loading the integration file before the main DataTable file. Without a test case it is difficult to say more though.

  Allan
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016 edited February 2016

  Thanks for the replys,

  ok i have fixed the default error was the dataTables.jqueryui.js being loaded before the dataTables script.

  I have edited my initialization to:

  $(document).ready(function() {
      $('#maintable').DataTable( {
                  "aoColumns": [
                null,
              { "orderDataType": "dom-text-numeric", "sType": "date-uk"},
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": 'number' },
              { "orderDataType": 'number' },
              { "orderDataType": 'number' },
              { "orderDataType": 'number' }
                  ]
      } );
  });
  

  however now the table doesn't work at all :(

  i'm still getting:

  SCRIPT5007: Unable to get property 'mData' of undefined or null reference
  File: jquery.dataTables.min.js, Line: 92, Column: 490
  

  these are are the scripts im loading:

  <link rel="stylesheet" href="styles/jquery-ui.css">
  <link rel="stylesheet" href="styles/jquery-ui.structure.css">
  <link rel="stylesheet" href="styles/jquery-ui.theme.css">
  <link rel="stylesheet" href="styles/jquery.dataTables.css">
  <link rel="stylesheet" href="styles/dataTables.jqueryui.css">
  <link rel="stylesheet" href="styles/NUA.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/papaparse.min.js"></script>
  <script src="js/jquery.dataTables.min.js"></script>
  <script src="js/dataTables.jqueryui.js"></script>
  <script src="js/NUA.js"></script>
  

  many thanks
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016

  Ok got it to work now.. hadn't set null for the rest of the columns:

  $(document).ready(function() {
      $('#maintable').DataTable( {
                  "aoColumns": [
                null,
              { "orderDataType": "dom-text-numeric", "sType": "date-uk"},
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": 'number' },
              { "orderDataType": 'number' },
              { "orderDataType": 'number' },
              { "orderDataType": 'number' },
                null,
                null,
                null,
                null
                  ]
      } );
  });
  

  no errors on mData.

  although when i click the sort button with the date inputs i get:

  SCRIPT438: Object doesn't support property or method 'split'
  File: NUA.js, Line: 67, Column: 5
  

  the line its referring to is the:

   var ukDatea = a.split('-');
  

  in

  jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  "date-uk-pre": function ( a ) {
      var ukDatea = a.split('-');
      return (ukDatea[0] + ukDatea[1] + ukDatea[2]) * 1;
  }
  });
  

  anyone have any ideas?
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016

  ukDatea comes up as undefinied
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  February 2016

  We'd need a link to a test page showing the issue. It suggests that the data is a string or possibly a date.

  Allan
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016 edited February 2016

  Thanks alot allan,

  have created a jsfiddle:
  https://jsfiddle.net/LmraxL5q/2

  For some reason the add row function is not functioning on there so i created one with a second row:
  https://jsfiddle.net/Ld9sqrad/3
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  February 2016

  In the function date-uk-pre the a parameter is 0 when activating the sort on column index 1. Thus the error.

  That in turn is coming from $.fn.dataTable.ext.order['dom-text-numeric']. I think you'd probably need to update your code to reflect that that column is a date string rather than a number.

  Allan
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016

  ah Allan cant thank you enough!

  $(document).ready(function() {
      $('#maintable').DataTable( {
                  "aoColumns": [
                null,
              { "orderDataType": "dom-text", "type": "string",  "sType": "date-uk"},
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-select" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text-numeric" },
              { "orderDataType": "dom-text", "type": "numeric"  },
              { "orderDataType": "dom-text", "type": "numeric"  },
              { "orderDataType": "dom-text", "type": "numeric"  },
              { "orderDataType": "dom-text", "type": "numeric"  },
                null,
                null,
                null,
                null
                  ]
      } );
  });
  
  

  that's the badger :)
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016 edited February 2016

  Allan,

  One last quick question.

  Basically i have added the select row delete feature, it works great but in order for my calcs to function correctly, i've had to create a function that replaces id's in the cells above the row deleted.

  The problem is that since i'm using document.getElementById('pla'+(a + 1)+'').id = pla; to change id's on each row, rows on the next page arn't in the DOM so only part my table is re-index.

  Is there a special way to make them visible on the DOM?

  thanks
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  February 2016

  No - DataTables intentionally removes rows that aren't needed for the current display for performance and compatibility.

  If you need to manipulate all of the rows int he table, use the DataTables API. Specifically look into rows().every() and row().node().

  Allan
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016

  Thanks again, i'm starting to see how it works now although it looks like i will format each array as a string, what will happen to values contained in the fields i'm editing will they be lost?

  Just testing a few things out:

  function deleteRow() {
  id --;
  var table = $('#maintable').DataTable();
  var x = table.fnGetData().length;
  
  console.log("x", x);
  
  table.rows().eq(0).each( function ( index ) {
      var row = table.row( index );
      console.log("row", row);
      var data = row.data();
      console.log("data", data[0]);
      data[0] = 1;
      console.log("data", data[0]);
      table.draw();
      } );
  

  Using this as a test function, the only thing is my changes dont seem to be appearing on the table?

  Also trying to get the table length fnGetData(). is coming up as an unsupported method.
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  February 2016

  See the top FAQ :-).

  I would suggest you use data() rather than the legacy API method. The current API is fully documented here.

  Allan
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016

  ok that was a head ache ha, i guess if i'm working on every row there is no need to know the length.

  Have used:

  function deleteRow() {
  id --;
  var table = $('#maintable').DataTable();
  
  table.rows().eq(0).each( function ( index ) {
      var row = table.row( index );
      var data = row.data();
      
      console.log("data", data);
      
      var sstr0 = '<span id="pla';
      var estr0 = '</span>';
      var istr0 = ''+index+'">'+(index + 1)+'';
      data[0] = sstr0 + estr0 + istr0;
      
      var sstr1 = '<input class="datepicker" id="ddate';
      var estr1 = '" type="text" size="7">';
      var istr1 = index;
      data[1] = sstr1 + estr1 + istr1;
      
      var sstr2 = '<select id="count';
      var estr2 = '"></select>';
      var istr2 = index;
      data[2] = sstr2 + estr2 + istr2;
      
      var sstr2 = '<select id="count';
      var estr2 = '"></select>';
      var istr2 = index;
      data[2] = sstr2 + estr2 + istr2;
      
      var sstr3 = '<select id="assol';
      var estr3 = '"><option value="liab">Buy</option><option value="asset">Sell</option></select>';
      var istr3 = index;
      data[3] = sstr3 + estr3 + istr3;
      
      var sstr4 = '<select id="undt';
      var estr4= '"><option value="u3o8">U3O8</option><option value="inf">Inflation</option></select>';
      var istr4 = index;
      data[4] = sstr4 + estr4 + istr4;
      
      var sstr5 = '<select id="loc';
      var estr5= '"><option value="cvd">ConverDyn</option><option value="cmh">Comurhex</option><option value="cam">Cameco</option><option value="les">LES</option><option value="ure">Urenco</option><option value="are">Areva</option><option value="gnf">GNF</option><option value="west">Westinghouse</option></select>';
      var istr5 = index;
      data[5] = sstr5 + estr5 + istr5;
     
      var sstr6 = '<select id="prodt';
      var estr6= '"><option value="out">Outright</option><option value="call">Ceiling (Call)</option><option value="put">Floor (Put)</option></select>';
      var istr6 = index;
      data[6] = sstr6 + estr6 + istr6;
      
      var sstr7 = '<select id="pricst';
      var estr7= '"><option value="float">Floating</option><option value="fix">Fixed</option></select>';
      var istr7 = index;
      data[7] = sstr7 + estr7 + istr7;
      
      var sstr8 = '<input id="fp';
      var estr8= '" onkeyup="begin();" type="text" size="1">';
      var istr8 = index;
      data[8] = sstr8 + estr8 + istr8;
      
      var sstr9 = '<input id="discp';
      var estr9= '" onkeyup="begin();" type="text" size="1">';
      var istr9 = index;
      data[9] = sstr9 + estr9 + istr9;
      
      var sstr10 = '<input id="sizeinf';
      var estr10 = '" onkeyup="begin();" type="text" size="6">';
      var istr10 = index;
      data[10] = sstr10 + estr10 + istr10;
      
      var sstr11 = '<input id="strike';
      var estr11 = '" onkeyup="begin();" type="text" size="1">';
      var istr11= index;
      data[11] = sstr11 + estr11 + istr11;
      
      var sstr12 = '<input class="datepicker" id="besd';
      var estr12 = '" type="text" size="7">';
      var istr12= index;
      data[12] = sstr12 + estr12 + istr12;
      
      var sstr13 = '<span id="um';
      var estr13 = '"></span>';
      var istr13 = index;
      data[13] = sstr13 + estr13 + istr13;
      
      var sstr14 = '<span id="av';
      var estr14 = '"></span>';
      var istr14 = index;
      data[14] = sstr14 + estr14 + istr14;
      
      var sstr15 = '<span id="tl';
      var estr15 = '"></span>';
      var istr15= index;
      data[15] = sstr15 + estr15 + istr15;
      
      var sstr16 = '<span id="pnl';
      var estr16 = '"></span>';
      var istr16 = index;
      data[16] = sstr16 + estr16 + istr16;
      
      var sstr17 = '<span id="suo';
      var estr17 = '"></span>';
      var istr17 = index;
      data[17] = sstr17 + estr17 + istr17;
      
      var sstr18 = '<span id="sr';
      var estr18 = '"></span>';
      var istr18 = index;
      data[18] = sstr18 + estr18 + istr18;
      
      var sstr19 = '<span id="si';
      var estr19 = '"></span>';
      var istr19 = index;
      data[19] = sstr19 + estr19 + istr19;
      
      var sstr20 = '<span id="sv';
      var estr20 = '"></span>';
      var istr20 = index;
      data[20] = sstr20 + estr20 + istr20;
      
      row.invalidate();
      } );   
      
      table.draw();
  }
  

  Thou now its updating strange things are happening may revert back soon, thanks!
• jr42.gordon Posts: 305Questions: 2Answers: 49

  February 2016

  Try utilizing all the below aspects of DataTable functionality. I believe each of these will better help you solve your problem/s.

  https://datatables.net/reference/api/row()

  https://datatables.net/reference/api/cell()

  https://datatables.net/reference/option/columns.render

  https://datatables.net/reference/option/createdRow

  https://datatables.net/reference/option/columns.createdCell

  https://datatables.net/reference/option/rowCallback

  Also, just a suggestion, but instead of editing/manipulating the data within the table, why not edit the original data array, then call

  table.clear()
  table.rows.data(newData).draw().
  

  If you utilize all the functionalities I linked to, that is all you would have to do to update your table.
• Ant248 Posts: 15Questions: 3Answers: 0

  February 2016

  Aw yes, thanks very much. Getting a much better understanding of it all now.

  Looks like i'm gunna have to do a massive re-code of my project ha

  Wish me luck, if only i found data tables earlier :)
• jr42.gordon Posts: 305Questions: 2Answers: 49

  February 2016

  The best advice I can give you is to take a week, if you can, and just play with DataTables in a test bed. I was lucky enough to take 1.5-2 weeks, and I am still learning. Another would be to use array of objects not strings, when you start using colVis and colReorder your life will be made so much easier.