为什么我的数据表在引导程序中看不到包含的数据？

Question

我想在bootstrap / jquery中创建一个动态表，类似于这个。在这个例子中，数据是硬编码的，所以我考虑用来自json的数据来改变它。 另外，表中的每一行都必须添加一个超链接，所以我的jquery代码如下：

$('#dataTables-example').DataTable({
                responsive: true
        });   

var data = '[{"number":"1","id":"2","price":"100.70","date":"2015-10-18 03:00:00","hidden":"21"},
{"number":"2","id":"2","price":"88.20","date":"2015-10-18 04:00:00","hidden":"22"}]';

    json = JSON.parse(data);

$.each(json, function(i, v) {
  $('<tr/>', {
    html: [$('<td/>', {
      text: v.number
    }), $('<td/>', {
      text: v.id
    }), $('<td/>', {
      text: v.price
    }), $('<td/>', {
      text: v.date
    }), $('<td/>', {
      html: [
        $('<a/>', {
          href: '#',
          class: 'show-details',
          text: 'show details',
          data: { id: v.hidden },
          click: function() {
            var id = $(this).data('id');
            console.log(id);
            alert(id);
          }
        })
      ]
    })]
  }).appendTo('#dataTables-example tbody')
})

在我的html中，我硬编码了表格的标题：

<div class="panel-body">
    <div class="dataTable_wrapper">
        <table class="table table-striped table-bordered table-hover" id="dataTables-example">
            <thead>
                <tr>
                    <th>number</th>
                    <th>id</th>
                    <th>price</th>
                    <th>date</th>
                    <th>show details</th>
                    <th style="display:none;">hidden identifier</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

后来感谢我的脚本，我将行添加到表中。 就那么简单。 但是，你可以在我的小提琴中看到：

http://jsfiddle.net/uo8rc5qL/6/

有一个问题，因为数据没有硬编码，表认为没有行并显示特定的消息那里No data available in table 。 此外，当我单击任何列名称对数据进行排序时 - 内容消失，因为表格认为排序后没有任何内容可以显示...我该如何解决这种情况？

Answer 1

这是因为您只是将数据添加到表中，而不是基础数据源。 解决方案是让数据表处理数据的加载：

$('#dataTables-example').DataTable({
                responsive: true,
                "data": JSON.parse(datasrc),
                "columns": [
                    { data: 'number' },
                    {data: 'id'},
                    {data: 'price' },
                    { data: "date" },
                    {
                        "data": "null",
                        "defaultContent": "<a>click</a>"
                    },
                    { data: "hidden" }
                ]
        });

工作示例： JSFIDDLE

Answer 2

总是通过API！ 使用table.row.add([..])而不是jQuery $('<tr>', {...方法：插入新行：

$.each(json, function(i, v) {
   var row = table.row.add([v.number, v.id, v.price, v.date, '<a>show details</a>']);
   table.cells({ row: row.index(), column: 4 }).nodes().to$().find('a')
      .attr('href', '#')
      .addClass('show-details')
      .css('cursor', 'pointer')
      .data('id', v.hidden)
      .on('click', function() {
          var id = $(this).data('id');
          console.log(id);
          alert(id);
      })
   table.draw();
})

分叉小提琴 - > http://jsfiddle.net/2wujw71x/1