Markup di escape in jQuery datatable basato su JSON?

Question

Utilizzo un jquery datatable che carica dinamicamente alcuni JSON utilizzando la proprietà sAjaxSource. Va tutto bene, tranne che il contenuto caricato viene trattato come potenziale markup, quindi le cose si fanno strane se il testo nelle celle contiene < o somesuch.

Come posso ottenere i dati per sfuggire ai miei dati prima di caricarli nella tabella? Non voglio farlo lato server perché il server non dovrebbe preoccuparsi di ciò che il client sta per fare con i dati.

Answer 1

[nota: le seguenti risposta è per DataTable 1.9x e sotto. 1.10 ha cambiato le convenzioni di denominazione dei metodi e alcune altre cose. I metodi 1.9x sono disponibili ma deprecati e saranno inevitabilmente eliminati completamente.]

Se è sicuro eliminarli "all'ingrosso" (cioè se si escogita una funzione di escape string che non influisce sulla validità del JSON), si può farlo utilizzando la funzione 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 
    } 
    }); 
} 

Se non siete sicuri circa la sicurezza di modificarlo all'ingrosso, si può fare su una base riga per riga con il 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; 
} 

In questo esempio, sto solo modificando la prima cella. Se è applicabile a tutte le celle, probabilmente vorrai scrivere un iteratore che attraverserà l'intera riga per effettuare la conversione. Se è applicabile solo ad alcune celle, puoi gestirle una alla volta.

Si noti che aData [0] e td: eq (0) hanno solo coincidenza lo stesso indice (0). Se hai colonne nascoste, non ci sarà necessariamente una corrispondenza. Inoltre, se usi mDataProp, dovrai gestirlo anche tu.

Answer 2

Qui ci sono un paio di bit semplici:

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

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