ajaxコールでJquery DataTableを再作成

Question

私はテーブル名とボタンを持つ<select >を持っています。ボタンを押すたびに、選択したテーブルのデータベースからデータを取得する必要があります。

問題は、私は前の表より列数が異なるテーブルからデータを持参しようとした場合、それは私にエラーを与えることである。

Uncaught TypeError: Cannot read property 'style' of undefined(…)

それは以上の13hoursをされている私がしようとしていますこの仕事とまだ何もしないでください。ここで

は私のコードです：

• は1がすでに存在する場合にデータテーブルを破壊してみてください。
• データベースからカラム名を取得して、datatableでdinamically作成します。
• データベースから選択したテーブルのデータを取得します。

• データ+列のデータテーブルを埋める：

  $('body').on('click', '#btnTeste', function(e){ 
  if ($.fn.DataTable.isDataTable('#myTable')) {   
      $('#myTable').DataTable().destroy(); 
  } 
  
  e.preventDefault(); 
  var tabela = $('select[name=selectTable]').val(); 
  
  // Busca nome das columnas da tabela selecionada 
  var columns = []; 
  $.ajax({ 
      type: 'GET', 
      url: 'getcolumnName.php', 
      dataType: 'json', 
      data: {table: tabela}, 
      success:function(data){    
       for(i=0; i < data.length; i++) 
       { 
        /*if(tabela == 'localidade') 
        { 
         columns.push({ "mDataProp": "Field"+ (i+1), sTitle: data[i].replace("dsc_","").replace("cod_munic", "cidade") 
          .replace("id_bairro", "bairro").replace("id_endereco", "endereco"), sType : "string"}); 
        } 
        else */ 
         columns.push({ "mDataProp": "Field"+ (i+1), sTitle: data[i].replace("dsc_",""), sType : "string"}); 
       } 
      } 
  }) 
  .done(function(msg){   
      var dados; 
      $.ajax({ 
       type: 'GET', 
       url: 'listaLocalidade.php', 
       dataType: 'json', 
       data: {table: tabela}, 
       success:function(data){ 
        dados = data; 
       } 
      }) 
      .done(function(msg){ 
       var nFields = Object.keys(dados[0]).length; 
       var nElements = dados.length; 
  
       //Prepara array dos dados    
       var resultado = []; 
       for(i=0; i< nElements; i++){ 
        resultado[i] = {}; 
        var prop = "Field"; 
        for(j=0; j < nFields; j++) 
        { 
         resultado[i][prop + (j+1)] = dados[i][ columns[j]['sTitle'] ]; 
        }     
       } 
       console.log(columns); 
       console.log(resultado); 
       $('#myTable').DataTable({ 
        "aoColumns" : columns, 
        "aaData": resultado 
       }); 
      }); 
  }); 
  

  を}）。

Answer 1

あなたのデータを見ると、問題を再現するのは難しいです。そこで、フィードから生成されたJSONを使用して、ユーザーがフィード行をさらにリクエストしたときにフィードテーブルを再作成する方法をデモンストレーションします（利用可能な場合）。

の代わりに、我々は"aaData": data.query.results.item全体JSON文字列を渡していると我々は、各オブジェクトのキーが割り当てられているどのようにオブジェクトキーと"mDataProp": "title"を設定することで、JSON文字列を使用するように指示し、複数の次元の配列を使用して

$(document).ready(function() { 
 
    
 
    // default table url 
 
    var url = "https://www.pinterest.com/healthycdns/drug-prevention.rss"; 
 
    createTable(url); 
 

 
    // recreate table on input change 
 
    $('#url').on('change', function() { 
 
    url = (this.value && this.value.indexOf('pinterest') > -1 ? this.value : url) 
 
    createTable(url, $('#limit').value); 
 
    }); 
 
    
 
    // recreate table on select change 
 
    $('#limit').on('change', function() { 
 
    url = ($('#url').value && $('#url').value.indexOf('pinterest') > -1 ? this.value : url) 
 
    createTable(url, this.value); 
 
    }); 
 
}); 
 

 
function createTable(url, limit) { 
 
    var $table = $('#datatable'), 
 
    datatable = $table.DataTable(), 
 
    columns = []; 
 
    $.ajax({ 
 
    type: 'GET', 
 
    url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%20%3D%20\'' + encodeURIComponent(decodeURIComponent(url)) + '\'%20limit%20' + (limit ? limit : 5) + '&format=json', 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     
 
     // set the data prop names 
 
     columns.push({ 
 
     "mDataProp": "title", 
 
     sTitle: "Title" 
 
     }); 
 
     columns.push({ 
 
     "mDataProp": "guid", 
 
     sTitle: "Guid" 
 
     }); 
 
    } 
 
    }).done(function(data) { 
 
    
 
    // destroy current table 
 
    datatable.destroy(); 
 
    
 
    // clear any column data 
 
    $table.empty(); 
 
    
 
    // setup the table 
 
    datatable = $table.DataTable({ 
 
     "aoColumns": columns, 
 
     "aaData": data.query.results.item 
 
    }); 
 
    }); 
 
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<h1 style="text-align:center;">Pinterest Feed Table Creater</h1> 
 
<label for="url">Feed url: </label> 
 
<input type="text" id="url" /> 
 
<label for="limit">Feed limit: </label> 
 
<select id="limit"> 
 
    <option value="5">5</option> 
 
    <option value="10">10</option> 
 
    <option value="15">15</option> 
 
</select> 
 
<br/> 
 
<br/> 
 
<table id="datatable"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

列名 sTitle: "Title"。次に、テーブルに入力されます。