javascript - 数据表转义期

Question

我有一个使用 datatable.js 创建的数据表。

我使用一个对象和带有名称的列来设置我的表:

{ "title": "image", "data": "foo1", "className": "dt-center" },
{ "title": "id", "data": "foo.bar", "className": "dt-center" },
{ "title": "name", "data": "lorem", "className": "dt-center" }

我正在尝试动态添加一行。我使用以下代码执行此操作:

var Json = {
    "foo1" : '5',
    "foo.bar" : '3',
    "lorem" : 'True'
}
var rtn = oTable.fnAddData(Json );

问题是，我得到 error “请求第 n 行的未知参数“foo.bar””。 This page 表示句点需要使用 \\ 进行转义。不幸的是，这并不可靠。

这是我在每个位置使用的反斜杠 (\) 数量的表格。

我怎样才能避免这个问题，以便它在两个地方都有效？

Answer 1

我相信您的原始数据格式如下所示，这是 columns.data 中的点分符号(foo.bar)的唯一解释最初工作。

{
   "foo1": '5',
   "foo": { "bar": '3'},
   "lorem": 'True'
}

columns.data 中的点符号 (foo.bar)允许从嵌套对象中读取，因此 foo.bar 引用名为 foo 的属性的 bar 子属性。

您必须将相同格式的数据传递给fnAddData，因此您需要使用以下代码:

var Json = {
    "foo1" : '5',
    "foo": { "bar" : '3' },
    "lorem" : 'True'
};

var rtn = oTable.fnAddData(Json);   

请参阅下面的示例以获取代码和演示。

$(document).ready(function() {
   
   var oTable = $('#example').dataTable({
     'columns': [
        { "title": "image", "data": "foo1", "className": "dt-center" },
        { "title": "id", "data": "foo.bar", "className": "dt-center" },
        { "title": "name", "data": "lorem", "className": "dt-center" }
     ]
   });
  
   var Json = {
      "foo1" : '5',
      "foo": { "bar" : '3' },
      "lorem" : 'True'
   };
  
   var rtn = oTable.fnAddData(Json );   
});

<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
</table>