Как добавить предварительно загруженные данные в тэг DataTable

У меня есть несколько массивов данных, предварительно загруженных через вызовы ajax. Я хочу добавить эти массивы данных в таблицу данных. Код выглядит следующим образом: -Как добавить предварительно загруженные данные в тэг DataTable

$("#mnGrTblBdy").empty(); 
    for(var i= 0; i<maingraphdata['datesrange'].length; i++) 
     { 
      $("#mnGrTblBdy").append('<tr data-child-value="hidden 1">'); 
      $("#mnGrTblBdy").append("<td class='details-control'></td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['datesrange'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['testorders'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['cmpltdords'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['tstsstrtd'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['tstscmpltd'][i]+ "</td>"); 

      $("#mnGrTblBdy").append("</tr>"); 

     } //end for loop 

    // Add event listener for opening and closing details 
    $('#example').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = table.row(tr); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } else { 
      // Open this row 
      row.child(format(tr.data('child-value'))).show(); 
      tr.addClass('shown'); 
     } 
    }); 

    var table = $('#example').DataTable({});

Но прилагаемая строки отображаются в виде простой таблицы, а не DataTable, а также через следующую ошибку

Cannot read property 'length' of undefined

Хотя данные видны, но не в таблице данных скорее в простой таблице html.

источник

2017-02-14 Jamshaid

Я думаю, вы пытаетесь работать со вложенными строками, правильно? проверьте [эту ссылку] (https://datatables.net/examples/api/row_details.html), это может помочь – Sebastianb

Я уже работал над вашим примером, а также реализовал этот пример в некоторых приложениях. Они работают с ajax-данными, а затем заполняют строки данных. Но в моем случае я уже получал данные через вызовы ajax, и я просто хочу заполнять данные с помощью этих массивов данных. – Jamshaid

Я не думаю, что вы можете использовать jquery для добавления tr элементов, таких как булочки с гамбургерами. Либо вы используете строку concat для создания стиля гамбургера, либо добавляете иерархически.

Строка CONCAT (вы должны возиться с синтаксисом, так что maingraphdata переменная вместо строки, извините):

var row = `<tr data-child-value="hidden 1">'); 
<td class='details-control'></td> 
<td >" +maingraphdata['datesrange'][i]+ "</td> 
<td >" +maingraphdata['testorders'][i]+ "</td> 
<td >" +maingraphdata['cmpltdords'][i]+ "</td> 
<td >" +maingraphdata['rptsdlvrd'][i]+ "</td> 
<td >" +maingraphdata['tstsstrtd'][i]+ "</td> 
<td >" +maingraphdata['tstscmpltd'][i]+ "</td> 
</tr>` 

$("#mnGrTblBdy").append(row);

Или

прилагая правильно

var $tr = $('<tr data-child-value="hidden 1"></tr>') 
$tr.append("<td class='details-control'></td>"); 
$tr.append("<td >" +maingraphdata['datesrange'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['testorders'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['cmpltdords'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['tstsstrtd'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['tstscmpltd'][i]+ "</td>"); 

$("#mnGrTblBdy").append($tr);

источник

2017-02-15 05:32:49

Как добавить предварительно загруженные данные в тэг DataTable

ответ

Смежные вопросы