jQuery datatables json initialisation invalid json

Question

I am attempting to format a jQuery DataTable using json held in a database. I pass the json to the client in a hidden field in the response. I then try initialising the datatable with the following js:

function initDataTables(){

        $('.datatable').each(function(i) {
            // Look for a hidden field containing the json to use when initialising the datatable
            var hiddenfieldkey = $(this).attr('id') + 'jsoninit'
            var hiddenfield = $('#' + hiddenfieldkey);
            if (hiddenfield.length > 0) {
                // We have found some 'special' json formatting, so use it
                var jsoninittext = $(hiddenfield).val();
                alert(jsoninittext);
                var json = $.parseJSON(jsoninittext);
                alert('point two');
                $(this).dataTable(json);

            }
            else {
                // Standard datatable formatting
                $(this).dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
                });
            }
        });

        initDataTableButtons();

    }

This all works fine with the following json (I've just copied the sql that I use to fill the json init table in the db:

update query set jQueryDatatableJSONInit=   
'{
"iDisplayLength": 25
,"bJQueryUI": true
,"sPaginationType": "full_numbers"
,"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
,"aoColumnDefs": [ 
        { "bVisible": false,  "aTargets": [ 0,3,4 ] }
        ,{ "sClass": "nowrap", "aTargets": [ 2 ] }
        ,{ "iDataSort": 0, "aTargets": [ 1 ] }
        ,{ "bSortable": false, "aTargets": [ 2 ] }
        ]
}'
where id ='336f7ea2-173a-4b8f-af30-e217d1e1c628'

However, a problem occurs when my json includes a function, as below (same as before, but includes an fnRender line containing a function):

update query set jQueryDatatableJSONInit=   
'{
"iDisplayLength": 25
,"bJQueryUI": true
,"sPaginationType": "full_numbers"
,"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
,"aoColumnDefs": [ 
        { "fnRender": function ( oObj ) { return oObj.aData[2] +'' ''+ oObj.aData[3]+'' ''+ oObj.aData[4];},"aTargets": [ 2 ]}
        ,{ "bVisible": false,  "aTargets": [ 0,3,4 ] }
        ,{ "sClass": "nowrap", "aTargets": [ 2 ] }
        ,{ "iDataSort": 0, "aTargets": [ 1 ] }
        ,{ "bSortable": false, "aTargets": [ 2 ] }
        ]
}'
where id ='336f7ea2-173a-4b8f-af30-e217d1e1c628'

The following line fails (with an Invalid JSON error):

var json = $.parseJSON(jsoninittext);

and so the second alert (point two) never runs, so it doesn't get to the dataTable() function. It looks to me as if the function definition (containing braces) is causing the json to be invalid. Does anyone know how I could format the datatable initialisation json so that it can continue to contain a function definition as expected by jquery datatables, but that will still be valid json (is there sort sort of escape I could use)? Thanks very much.

lsuarez · Accepted Answer · 2011-02-04 17:08:18Z

1

JSON serialization is not intended for storing functions. JSON, by its nature, is a way of serializing data members within an object, not its internal processes. See http://www.json.org/ under the "value" heading (three figures down) to see what objects are intended for serialization using JSON.

You can enclose the function in quotation marks to force it into a string and run an eval on that data member, but I'm not normally one to encourage developers to make use of eval().

answered Feb 4, 2011 at 17:08

lsuarez

4,9921 gold badge31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DEH Over a year ago

thanks very much for the info, I coded around the problem (see below)

DEH · Accepted Answer · 2011-02-09 09:44:47Z

0

In the end I couldn't get this to work without eval, which i want to avoid. My workaround was to encapsulate the fnRender functionality (where I was combining several columns into one column) into the server layer, so that the server combined the columns and there was therefore no need to use fnRender to combine them. Shame, but there you go.

answered Feb 9, 2011 at 9:44

DEH

1,7574 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

jQuery datatables json initialisation invalid json

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related