重新創建數據表jQuery的用Ajax調用

Question

我有一個表名和一個按鈕<select >。每次我按下按鈕，我都必須從選定表格的數據庫中提取數據。

的問題是，如果我嘗試從不同數量比以前的表列的錶帶上的數據，它給了我一個錯誤：

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

它已經超過13小時我試着做這項工作，但還沒有。

下面是代碼，我：

• 試圖摧毀的數據表中，如果有一個已;
• 從數據庫中獲得列名對數據表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演示當用戶請求更多饋送行（如果可用）時如何重新創建饋送表。

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

代替使用多個二維陣列我們傳遞"aaData": data.query.results.item整個JSON字符串和我們告訴它如何通過與對象鍵設定"mDataProp": "title"使用JSON串中的每個對象鍵被分配一個列名sTitle: "Title"。然後填充到表中。