Question

I’ve got a view with a JQuery DataTable that loads it’s content via AJAX by calling an action method (server-side processing) that returns a nice JSON string with all the data.

What I’m doing is the following:

1. I create a List that contains the data for the DataTable. Each row in the table is a string array because that’s a requirement for DataTables.
2. I put all the data for the DataTable in an anonymous object. This data consists of the amount of rows, the data (the List) and some other stuff.
3. A JSON string is created from this anonymous object so all data is returned in JSON format
4. Some magic happens and the data is displayed in my DataTable.

The problem is: I can’t output HTML because Razor automatically escapes this. I already tried stuff like Html.Raw, new HtmlString() and stuff like that, but the problem is: I HAVE to put HTML strings in my List collection because DataTables can’t handle any other types as far as I know.

The DataTable in my view doesn’t contain any definition of what columns should be rendered, this is done automatically by just looping through my JSON string (with Javascript or whatever) and displaying it (again, with Javascript).

So the question is: how can I render HTML in my DataTable when using MVC3 server-side processing?

BTW, the code:

<table id="datatable">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Destination address</th>
            <th>Platform</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody id="tabledata">
    <!-- Content will be rendered here by AJAX -->
    </tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Destination address</th>
            <th>Platform</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </tfoot>
</table>

And the server-side processing:

public JsonResult List()
{
    List<PushApplication> pushApplications = _service.GetData(Request).ToList();

    int totalRecords = _service.GetApplicationCount();

    // Reformat the data.
    List<string[]> aaData = new List<string[]>(pushApplications.Count);
    aaData.AddRange(pushApplications.Select(application => new[]
    {
        application.Id.ToString(),
        application.Name, 
        application.DestinationAddress,
        application.Platform,
        "<a href='/PushApplication/Edit/" + application.Id + "'>Modify</a>",
        "<a href='/PushApplication/Delete/" + application.Id + "'>Delete</a>"
    }));

    // Construct anonymous object for the data table.
    var data = new { sEcho = Request.QueryString["sEcho"], iTotalRecords = totalRecords, iTotalDisplayRecords = totalRecords, aaData = aaData };

    return Json(data, JsonRequestBehavior.AllowGet);
}

I invoke the datatable with the following bit of Javascript:

$(document).ready(function () {
    var oTable = $('#datatable').dataTable({
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": true,
        "iDisplayStart": 0,
        "sEcho": 1,
        "sDom": 'T<"clear"><"top"fi>rt<"bottom"pl><"clear">',
        "sAjaxSource": '/PushApplication/List',
        "sPaginationType": "full_numbers",
        "fnServerData": fnDataTablesPipeline,
        "oTableTools": {
            "sSwfPath": "/Plugins/TableTools/swf/copy_cvs_xls_pdf.swf"
        },
        "aoColumns": [
            { sWidth: '10%' },
            { sWidth: '30%' },
            { sWidth: '30%' },
            { sWidth: '30%' }
        ]
    });

    $("#submitForm").click(function () {
        oTable.fnDraw();
    });
});

Answer 1

I think I misunderstood with my first reply, so apologies if you’ve already read it:

Are you trying to add HTML into some cells or rows? For example, adding a button that will have extended functionality?

The best way to do this isn’t in the JSON (although it’s certainly possible with other frameworks) it’s in the DataTables callbacks. If you want to affect individual rows or cells within the row, go for fnRowCallback which I have used to add any number of extra widgets and markup to my cells.

[update follows]

From the DataTables website (http://datatables.net/ref#fnrowcallback) here’s how you would do it with a 2D array:

$(document).ready(function() {
    $('#example').dataTable( {
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            /* Bold the grade for all 'A' grade browsers */
            if ( aData[4] == "A" )
            {
                $('td:eq(4)', nRow).html( '<b>A</b>' );
            }
            return nRow;
        }
    } );
} );

Further explanation of the sample: the callback accepts a few different objects, including nRow which is an object instance of the current row, and aData which corresponds to the aaData being sent back by the server side. It’s a simple if statement: if there is the string “A” in the 5th column of data, go to the 5th column inside of nRow object and change its HTML so that instead of “A” it’s a bolded “A”. At the end of the callback, nRow is returned back, in its now-modified state.

You’re not limited by 2D arrays of course. If you’re using key-value pairs in a 3D object, you might look for something like aData["someLabel"] to modify. And the columns don’t need to correspond; in the example they’re both column 5, but you can do whatever you want. Or if you want to modify the row itself, you can do that, too, instead of looking for a particular td inside of nRow.