Marcación de escape en tabla de datos jQuery controlada por JSON?

Question

Estoy usando un jquery datatable que está cargando algunos JSON dinámicamente usando la propiedad sAjaxSource. Todo está bien, excepto que el contenido cargado se trata como un marcado potencial, por lo que las cosas se ponen raras si el texto en las celdas contiene < o somesuch.

¿Cómo puedo hacer que las tablas de datos escapen de mis datos antes de cargarlos en la tabla? No quiero hacerlo del lado del servidor porque al servidor no le importa lo que el cliente haga con los datos.

Answer 1

[Nota: la siguiente respuesta es para tablas de datos 1,9x y por debajo. 1.10 cambió las convenciones de nomenclatura de métodos y algunas otras cosas. Los métodos 1.9x están disponibles pero obsoletos e inevitablemente se eliminarán por completo.]

Si es seguro quitarlos "al por mayor" (es decir, si diseña una función de cadena de escape que no afecte la validez de JSON), puede hacerlo mediante el uso de la función fnServerData:

"fnServerData": function (sSource, aoData, fnCallback) { 
    $.ajax({ 
    "dataType": 'json', 
    "type": "GET", 
    "url": sSource, 
    "data": aoData, 
    "success": function (data) { 
     // run your escape string function to modify 'data' 
     fnCallback(data); // or fnCallback(newData) if you used new variable 
    } 
    }); 
} 

Si no está seguro acerca de la seguridad de su modificación por mayor, usted puede hacerlo de forma fila por fila con el fnRowCallback:

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 

    var cellData = myEscaper(aData[0]); // where myEscaper() is your own custom function 
    $('td:eq(0)').text(cellData); 

    return nRow; 
} 

En esta muestra, solo estoy modificando la primera celda. Si es aplicable a todas las celdas, es probable que desee escribir un iterador que recorra toda la fila para realizar la conversión. Si solo es aplicable a algunas celdas, puede manejarlas de a una por vez.

Tenga en cuenta que aData [0] y td: eq (0) solo coincidentemente tienen el mismo índice (0). Si tiene columnas ocultas, no necesariamente habrá una coincidencia. Además, si usa mDataProp, tendrá que manejar eso también.

Answer 2

Aquí hay un par de bits simples:

function htmlEncode(value) { 
    return $('<div/>').text(value).html(); 
} 

function htmlDecode(value) { 
    return $('<div/>').html(value).text(); 
}