Why can my table only be visible with version jquery.min.js v1.9.1and not with jQuery.min.js v3.1.1

Idefix8

Hi,
I started to work with datatables but now I have a problem with the versions of jquery, because only v.1.9.1 worked. When I used v3.1.1 no data for table is available in my datatable and all functions like search or sort columns are not working, too. Here below you can see my .js. I create the json with an ObjectMapper of Java with a HashMap of a String and a List of Strings as input. The jquery.dataTables.min.js is version 1.10.4.

function onUpdate(json) {

// Structure of json table
// {
// goSlimNodes: {
//  Number:  [String],
//  Number:  [String],
//  }
//}


var data = JSON.parse(json);

console.log(data);
$("table").contents().remove();

Object.keys(data).forEach(function (key) {
    console.log(key);

    var goterms = data[key];
        var tr = '<tr>';
        tr += '<td>' + key + '</td>';
        tr += '<td>' + goterms.length + '</td>';
        tr += '</tr>';
        $('#table').append(tr);

});

var columns = [ {"title":"GoSlimNode"} ,{"title": "Counter"} ];

$(document).ready(function() {
    $('#table').dataTable({
        "pagingType": "full_numbers",
        "data" : data,
        "paging":   true,
        "ordering": true,

        "order": [[ 1, "desc" ]],
        "search": {
            "search": "",
            "smart": true,
            "regex": true
        },
        "columns": columns,
        "columnDefs": [
            {"sortable": true, "targets": [0], sWidth: "25%", bSearchable: true, bSortable: true },

        ],
        "sorting": [[1, 'asc']],
    });
});

}

   ObjectMapper objectMapper = new ObjectMapper();
    try {
        return objectMapper.writeValueAsString(goSlimNodeList);
    } catch (JsonProcessingException e) {
        throw new RuntimeException(e);
    }

Could someone help me?

colin

Hi @Idefix8 ,

It should work with both. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Hard to say without seeing it run.

jQuery 3.1.1 should work fine. Do you get any errors in your browsers console?

I do have some questions about your code:

What is the output of this?

console.log(data);

Is this code building your column headers?

    var goterms = data[key];
        var tr = '<tr>';
        tr += '<td>' + key + '</td>';
        tr += '<td>' + goterms.length + '</td>';
        tr += '</tr>';
        $('#table').append(tr);

Does your data structure (data" : data,) match your columns config ("columns": columns,)?

Kevin

Idefix8

Hi @colin ,
I hope it is quite right. Here is the test case: http://live.datatables.net/hitaqifa/1/. Thank you for your quick answer. Or the other link:http://live.datatables.net/hitaqifa/1/edit?html,css,js,console,output.

@kthorngren
I havn't got a header. I thought it would be enough to set the title in the column definition. The output of console.log(data) look like this:

cell division (0051301): (2) ["0008356", "0008356"]
DNA binding (0003677): (12) ["0003697", "0003684", "0003688", "0043565", "0000976", "0043565", "0043565", "0000976", "0043565", "0043565", "0000976", "0001047"]
DNA metabolic process (0006259): (21) ["0006281", "0006260", "0006310", "0006281", "0006265", "0006265", "0006281", "0006260", "0006310", "0006281", "0006270", "0006281", "0006260", "0006281", "0006261", "0006281", "0006260", "0006260", "0006265", "0006281", "0006281"]
DNA-binding transcription factor activity (0003700): (3) ["0001217", "0001217", "0001217"]
RNA binding (0003723): (55) ["0019843", "0000049", "0003743", "0008135", "0003743", "0008135", "0003729", "0016149", "0008135", "0070181", "0019843", "0003730", "0003729", "0000049", "0008097", "0019843", "0000049", "0048027", "0070181", "0003729", "0019843", "0019843", "0019843", "0019843", "0003746", "0008135", "0019843", "0019843", "0016149", "0008135", "0019843", "0019843", "0000049", "0019843", "0019843", "0019843", "0019843", "0000049", "0019843", "0019843", "0000049", "0000049", "0019843", "0000049", "0019843", "0003746", "0008135", "0019843", "0000049", "0003746", "0008135", "0008097", "0019843", "0019843", "0019843"]
anatomical structure formation involved in morphogenesis (0048646): (30) ["0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0042244", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435", "0030435"]
biological_process (0008150): (2093) ["0007049", "0051301", "0030435", "0030154", "0048646", "0009143", "0009117", "0044281", "0009058", "0034641", "0009056", "0034655", "0006777", "0032324", "0044281", "0051186", "0009058", "0034641", "0009098", "0044281", "0009058", "0006520", "0044205", "0006145", "0044281", "0034641", "0009058", "0009056", "0009073", "0009423", "0044281", "0009058", "0006520", "0005975", "0006098", "0044281", "0051186", "0034641", "0019464", "0009107", "0009249", "0044281", "0006629", "0051186", "0009058", "0006790", "0009056", "0051604", "0006520", "0006464", "0009228", "0009229", "0044281", "0051186", "0034641", "0009058", "0006790", "0006189", "0006541", "0044281", "0034641", "0009058", "0006520", "0019521", "0044281", "0005975", "0046677", "0006412", "0009058", "0034641", "0009097", "0009086", "0009088", "0044281", "0009058", "0006790", "0006520", "0006397", "0006364", "0034641", "0006094", "0006090", "0044281", "0005975", "0009058", "0006865", "0031460", "0006810", "0071555", "0009252", "0008360", "0046677", "0009058", "0071554", "0045982", "0045892", "0009116", "0006351", "0044281", "0009058", …]

but for all 7000 entries, so I am not showing the whole output.

There are no errors on the browser console.

I am not sure how data looks like, because it the json String looks like that:
// {
// goSlimNodes: {
// Number: [String],
// Number: [String],
// }
//}

kthorngren

Thanks for the example. Looking at the browser's console I see this error:

Uncaught ReferenceError: data is not defined

You don't have a data variable defined so I commented out "data" : data,. Datatables is now working:
http://live.datatables.net/yosabali/1/edit

Kevin

Idefix8

Oh, okay thank you very much now it works