Generate dynamic columns with a variable string doesn't work

Yan Garnier

Hi everybody,

I'm trying to generate a dynamic DataTable according to a variable $_GET. So I generate a string according to the columns name and their type (only important for dates so I can sort them even if they're formatted).
My problem is that when I do columns: s_dynamicColumns, I have in my console this Error "Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [" and the DataTable is not generate.

The thing that I don't understand is when I console.log my variable I've got this :
[{"title": "Prénom"},{"title": "Nom"},{"title": "Poste"},{"title": "Date d'arrivée", 'type': 'date-eu'},{"title": "Salaire"}]
and when I copy/paste this like this :
columns: [{"title": "Prénom"},{"title": "Nom"},{"title": "Poste"},{"title": "Date d'arrivée", "type": "date-eu"},{"title": "Salaire"}],
it works.

I've noticed that to generate the DataTable I can take off all the line "columns: ...," and it works but in that case I can't sort my dates anymore.

Do you have any ideas of where the problem come from ?

There is my javascript file :

$(document).ready(function(){

    var s_variableGet = window.location.search.substring(1);
    var a_split = s_variableGet.split("=", 2);
    var o_dataSet =  decodeURI(a_split[1]);

    o_dataSet = JSON.parse(o_dataSet);
    var a_columns = o_dataSet['columns'];
    var a_rows = o_dataSet['rows'];

   var s_dynamicColumns = "[";

    for(var z=0; z < a_columns.length; z++){
        if(a_columns[z]['type'] == 'date'){
            var type = ", 'type': 'date-eu'";
        }else{var type = '';}
        if(z == 0){
            s_dynamicColumns+= '{"title": "'+ a_columns[z]["nom"] + '"'+type+'}';}
        else{
            s_dynamicColumns+= ',{"title": "'+ a_columns[z]["nom"] + '"'+type+'}';
        }
        $('#resultat-requete thead tr').append('<th>'+a_columns[z]['nom']+'</th>');
    }
    s_dynamicColumns+= "]";

    var hauteurGrid = $(window).height() - 120;

    console.log(s_dynamicColumns);

    tableResultatRequete = $('#resultat-requete').on('preXhr.dt', function (e, settings, data) {
        }).DataTable({
        data: a_rows,
        scrollY: hauteurGrid,
        order: [],
        //columns: s_dynamicColumns, <-- there is the way that doesn't work
        //       [{"title": "Prénom"},{"title": "Nom"},{"title": "Poste"},{"title": "Date d'arrivée", 'type': 'date-eu'},{"title": "Salaire"}] <-- there is the console.log of "s_dynamicColumns"
        columns: [{"title": "Prénom"},{"title": "Nom"},{"title": "Poste"},{"title": "Date d'arrivée", "type": "date-eu"},{"title": "Salaire"}], // <-- there is the way who works in this example but which is not dynamic at all
        info: false,
        lengthChange: false,
        paging: true,
        searching: true,
        language: {
            url: 'js/dataTables.french.json'
        }
    });

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

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

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

Thanks a lot !

kthorngren

The problem is that s_dynamicColumns is a string. It needs to be an array which is what you have with columns: [{"title": "Prénom"},{"title": "Nom"}.....

You will want something more like this:

var s_dynamicColumns = [];
for(var z=0; z < a_columns.length; z++){
  s_dynamicColumns.push({"title": a_columns[z]["nom"] + type});
}

Didn't test it so you may need to make adjustments.

Kevin

Yan Garnier

You're right, with this change it works, thanks a lot !