JQueryテーブルにtheadとtbodyを追加します

Question

私はJQueryを使ってDataTableを構築しています。しかし、c is undefinedエラーが発生します。これは私のコードがtheadとtbodyを含まないためです。

theadとtbodyを次のコードに追加するにはどうすればよいですか？

私は、動作しなかったdataSrc： "Data"を追加しようとしました。私はDataTableが正しいフォーマットのためにtheadを必要としていることを理解しています。

 function getItemStyles() { 
      try 
      { 
       //fetch item styles 
       $.ajax({ 
        cache: false, 
        dataSrc: "Data", 
        url: 'manage-prices-get-item-styles', 
        data: {}, 
        type: 'post', 
        success: getItemStylesSucess, 
        error: fail 
       }); 
      } 
      catch(e){ 
       alert(e.message); 
      } 
     } 


    function getItemStylesSucess(result) { 
     try 
     { 
      var output = ''; 

      if (result.success == true) { 
       //build table 
       var xmlDoc = $.parseXML(result.message); 
       var list = $(xmlDoc).find("Inventory"); 

       //Create a HTML Table element. 
       var table = $("<table id='item-style-table' class='table table-bordered table-striped' />"); 
       table[0].border = "1"; 

       //Add the header row. 
       var row = $(table[0].insertRow(-1)); 
       list.eq(0).children().each(function() { 
        var headerCell = $("<th />"); 
        headerCell.html(this.nodeName); 
        row.append(headerCell); 
       }); 
       table[0].append('</thead>'); 

       //Add the data rows. 
       $(list).each(function() { 
        row = $(table[0].insertRow(-1)); 
        $(this).children().each(function() { 
         var cell = $("<td />"); 
         cell.html($(this).text()); 
         row.append(cell); 
        }); 
       }); 

       var dvTable = $("#item-styles"); 
       dvTable.html(""); 
       dvTable.append(table); 
       $("#item-style-table").DataTable(); 

      } 
      else { 
       output = result.message; 
      } 

      $('#item-styles-load').css('display', 'none'); 

     } 
     catch (e) { 
      alert(e.message); 
     } 
    } 

Answer 1

コードを以下のように変更し、100％動作します。

参考：DataTables when HTML table is created through import of xml

function getItemStylesSucess(result) { 
     try 
     { 
      var output = ''; 

      if (result.success == true) { 
       //build table 
       $("#item-styles").DataTable({ 
        data: loadItemStylesData(result.message) 
       }) 

      } 
      else { 
       output = result.message; 
      } 

      $('#item-styles-load').css('display', 'none'); 

     } 
     catch (e) { 
      alert(e.message); 
     } 
    } 

    function loadItemStylesData(rocol) { 
     var data = []; 
     $(rocol).find('Inventory').each(function() { 
      data.push([ 
         $(this).find("InventoryID").text(), 
         $(this).find("SytleColour").text() 
      ]) 
     }) 
     return data; 
    }