在JSON驱动的jQuery数据表中转义标记?

时间:2011-10-12 13:08:35

标签: javascript jquery datatables

我正在使用jquery datatable,它使用sAjaxSource属性动态加载一些JSON。一切都很好,除了加载的内容被视为潜在的标记,所以如果单元格中的文本包含<或某些内容,那么事情就会变得奇怪。

如何在将数据加载到表中之前让数据表转义我的数据?我不想做服务器端,因为服务器不应该关心客户端将如何处理数据。

2 个答案:

答案 0 :(得分:4)

[注意:以下答案适用于DataTables 1.9x及以下版本。 1.10改变了方法命名约定和其他一些东西。 1.9x方法可用,但已被弃用,并且不可避免地会被完全剥离。]

如果可以安全地剥离它们“批发”(即如果你设计了一个不影响JSON有效性的转义字符串函数),你可以使用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
    }
  });
}

如果您不确定批量修改的安全性,可以使用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;
}

在这个示例中,我只修改了第一个单元格。如果它适用于所有单元格,您可能希望编写一个迭代器,它将遍历整行以进行转换。如果它仅适用于某些单元格,则可以一次处理一个单元格。

请注意,aData [0]和td:eq(0)只是巧合地具有相同的索引(0)。如果您有任何隐藏列,则不一定匹配。另外,如果你使用mDataProp,你也需要处理它。

答案 1 :(得分:2)

以下是几个简单的部分:

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

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