Creating a javascript object from a string for use with datatables

Question

This question is regarding the plugin found here: http://www.datatables.net/usage/columns

var hidecols = '{"sClass": "Hide", "aTargets": [0]},{"sClass": "asdf", "aTargets": [1]},{"sClass": "qwer", "aTargets": [2]}';

var hidecolsobj = eval('(' + hidecols + ')');


        var oTable = $('#MainContent_OverviewTable').dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "aoColumnDefs":
            [
                hidecolsobj, // <--------- *** HERE ***
            ],
            "sAjaxSource": "Services/Service.svc/GetDataTableOutputOverview",
            "fnServerData": function (sSource, aoData, fnCallback) {
                var jsonAOData = JSON.stringify(aoData);
                $.ajax({
                    type: "POST",
                    async: true,
                    url: sSource,
                    contentType: "application/json; charset=utf-8",
                    data: '{"Input":' + jsonAOData + '}',
                    dataType: "json",
                    success: function (msg) {
                        fnCallback(msg);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }
        });

So the code works fine with no errors but the class "qwer" is the only one that is being applied to my table. I tested this out and it only applies the class that appears last in my list of objects. I would like each of the columns to have the classes defined in the hidecols variable. How can I do that?

This is how it appears in the documentation from the Datatables website:

$('#example').dataTable( {
    "aoColumnDefs": [ 
        { "sClass": "my_class", "aTargets": [ 0 ] }
    ]
} );

EDIT:

            "aoColumnDefs":
            [
                { "sClass": "Hide", "aTargets": [0] },
                { "sClass": "asdf", "aTargets": [1] }, 
                { "sClass": "qwer", "aTargets": [2] }
            ],

The above edit works properly but this isn't an option for me. I need to be able to build the string hidecols dynamically.

Answer 1

You are passing DataTables a string for the aoColumnDefs parameter. Just remove the quote marks around the hidecols "string" to make it an array of objects. That will remove the need for the evil (eval).

var hidecols = [{"sClass": "Hide", "aTargets": [0]},{"sClass": "asdf", "aTargets": [1]},{"sClass": "qwer", "aTargets": [2]}];

Allan

Answer 2

Ah! I figured out how to do it!

Instead of doing this:

        "aoColumnDefs":
        [
            hidecolsobj, // <--------- *** HERE ***
        ],

I should be doing this:

    var hidecols = '[{"sClass": "Hide", "aTargets": [0]},{"sClass": "asdf", "aTargets": [1]},{"sClass": "qwer", "aTargets": [2]}]';
var hidecolsobj = eval('(' + hidecols + ')');
            "aoColumnDefs": hidecolsobj, // <--------- *** HERE ***