Few Problems

Ant248

Hi,

Having a few problems.

Firstly two errors in my console log:

SCRIPT5007: Unable to get property 'defaults' of undefined or null reference
File: dataTables.jqueryui.js, Line: 47, Column: 1

and

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

the second when i use this code to initialise:

$(document).ready(function() {
    $('#maintable').DataTable( {
                "columnsDefs": [
            { "targets": 1, "orderDataType": "dom-text-numeric",},
            { "targets": 2, "orderDataType": "dom-select" },
            { "targets": 3, "orderDataType": "dom-select" },
            { "targets": 4, "orderDataType": "dom-select" },
            { "targets": 5, "orderDataType": "dom-select" },
            { "targets": 6, "orderDataType": "dom-select" },
            { "targets": 7, "orderDataType": "dom-text-numeric" },
            { "targets": 8, "orderDataType": "dom-text-numeric" },
            { "targets": 9, "orderDataType": "dom-text-numeric" },
            { "targets": 10, "orderDataType": "dom-text-numeric" },
            { "targets": 11, "orderDataType": "dom-text-numeric" },
            { "targets": 12, "orderDataType": 'number' },
            { "targets": 13, "orderDataType": 'number' },
            { "targets": 14, "orderDataType": 'number' },
            { "targets": 15, "orderDataType": 'number' }
                ],
                "aoColumns":[
            { "sType": "date-uk" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null    
                ]
    } );
});

I'm trying to sort a date in the format of yyyy-mm-dd i'm using the plugin (slightly modified):

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

"date-uk-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"date-uk-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );

however i get the error message a cannot be spit.

Also last quick question, my dynamically calculated values do not sort.
Are they not picked up the same way as form inputs?

Thanks,
Ant

jr42.gordon

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

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

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

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

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

ukDatea comes up as undefinied

allan

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

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

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

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

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

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

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

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

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

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

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

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.