Почему мои данные в загрузочном блоке не отображают данные?

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

Всегда пройти через 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

Answer 2

Это потому, что вы просто добавляете данные в таблицу, а не в базовый источник данных. Решение состоит в том, чтобы позволить DataTables обрабатывать загрузку данных:

$('#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