Question

我想在bootstrap / jquery中创建一个动态表，类似于this one 在这个例子中，数据是硬编码的，所以我考虑用来自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();
})

分叉小提琴 - ＆gt;的 http://jsfiddle.net/2wujw71x/1

为什么我的数据表在bootstrap中看不到包含的数据？

2 个答案: