如何用json数据和ajax创建动态jQuery数据表？

我试图用jQuery和json创建一个动态数据表。我试图确定键，并将它们设置为标题，然后将键中的值设置为表中的行。如何用json数据和ajax创建动态jQuery数据表？

到目前为止，我的代码是：

<script type="text/javascript"> 
$('#action-button').click(function() { 
    $.ajax({ 
     url: 'https://api.myjson.com/bins/1oaye', 
     data: { 
     format: 'json' 
     }, 
     error: function() { 
     $('#info').html('<p>An error has occurred</p>'); 
     }, 
     dataType: 'json', 
     success: function(data) { 
     // EXTRACT VALUE FOR HTML HEADER. 
     var col = []; 
     for (var i = 0; i < data.length; i++) { 
      for (var key in data[i]) { 
       if (col.indexOf(key) === -1) { 
        col.push(key); 
       } 
      } 
     } 

     // CREATE DYNAMIC TABLE. 
     var table = document.createElement("table"); 

     // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. 

     var tr = table.insertRow(-1);     // TABLE ROW. 

     for (var i = 0; i < col.length; i++) { 
      var th = document.createElement("th");  // TABLE HEADER. 
      th.innerHTML = col[i]; 
      tr.appendChild(th); 
     } 

     // ADD JSON DATA TO THE TABLE AS ROWS. 
     for (var i = 0; i < data.length; i++) { 

      tr = table.insertRow(-1); 

      for (var j = 0; j < col.length; j++) { 
       var tabCell = tr.insertCell(-1); 
       tabCell.innerHTML = data[i][col[j]]; 
      } 
     } 

     // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
     var divContainer = document.getElementById("showData"); 
     divContainer.innerHTML = ""; 
     divContainer.appendChild(table); 
     }, 
     type: 'GET' 
    }); 
}); 
</script>

，但我不断收到读取错误：如何创建一个动态数据

(index):80 Uncaught TypeError: Cannot set property 'innerHTML' of null

My JSON data structure

JSfiddle

表只是基于json数据返回集合将表格中的所有内容都转换为表格中的值？

来源

2016-10-10 kevinabraham

如果80是行号是哪一行是我在你的发布代码中？ – mm759

我刚刚将最后一个'div'改为'

'，这似乎解决了这个问题？看[这个更新到小提琴]（https://jsfiddle.net/wpLcfw7p/1/） – Dhananjay

我做你的代码中有两处修改，它似乎之后是工作。

1）在div'info'后面添加了一个ID为'showData'的div。

<div id="showData"> 
</div>

2）封闭式$（ '＃动作按钮'）。点击（函数（）在$（文件）。就绪（函数（）。

$(document).ready(function() { 

    $('#action-button').click(function() { 
     $.ajax({ 
      url: 'https://api.myjson.com/bins/1oaye', 
      data: { 
       format: 'json' 
      }, 
      error: function() { 
       $('#info').html('<p>An error has occurred</p>'); 
      }, 
      dataType: 'json', 
      success: function(data) { 
       // EXTRACT VALUE FOR HTML HEADER. 
       var col = []; 
       for (var i = 0; i < data.length; i++) { 
        for (var key in data[i]) { 
         if (col.indexOf(key) === -1) { 
          col.push(key); 
         } 
        } 
       } 

       // CREATE DYNAMIC TABLE. 
       var table = document.createElement("table"); 

       // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. 

       var tr = table.insertRow(-1);     // TABLE ROW. 

       for (var i = 0; i < col.length; i++) { 
        var th = document.createElement("th");  // TABLE HEADER. 
        th.innerHTML = col[i]; 
        tr.appendChild(th); 
       } 

       // ADD JSON DATA TO THE TABLE AS ROWS. 
       for (var i = 0; i < data.length; i++) { 

        tr = table.insertRow(-1); 

        for (var j = 0; j < col.length; j++) { 
         var tabCell = tr.insertCell(-1); 
         tabCell.innerHTML = data[i][col[j]]; 
        } 
       } 

       // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
       var divContainer = document.getElementById("showData"); 
       divContainer.innerHTML = ""; 
       divContainer.appendChild(table); 
      }, 
      type: 'GET' 
     }); 

    }); 

});

错误说，它期待ID为“showData”一个div。

来源

2016-10-10 07:26:20 rinoy

谢谢Rinoy，解决了我的问题！ – kevinabraham

很好听.. – rinoy

首先对于数据表，您需要创建静态标头部分。我在这里分享我最简单的代码。

<div class="table-responsive" style="margin-top:20px;"> 
    <table id="tblPatientDiagnosed" class="table table-vcenter table-responsive table-condensed table-bordered display"> 
     <thead> 
      <tr> 
       <th class="text-center" width="20%">Consultant Id</th> 
       <th class="text-center" width="30%">Consultant Name</th> 
       <th class="text-center" width="30%">Patinet Name</th> 
       <th class="text-center" width="20%">No. of time seen</th> 
      </tr> 
     </thead>    
    </table> 
</div>

这是我的静态数据表头。

现在在文档就绪功能中，您需要初始化它。

var tblPatientDiagnosed = ''; 
$(document).ready(function() { 

    tblPatientDiagnosed = $('#tblPatientDiagnosed').DataTable({ 
    "bPaginate": true, 
    aaSorting:[], 
    "processing": true, 
    "sPaginationType": "full_numbers", 
    }); 

    $("#action-button").on('click',function(){ 

    tblPatientDiagnosed.fnClearTable();//fisrtly clearing data-table data if exist 

    $.ajax({ 
    type: "POST", 
    cache: false, 
    url: "controllers/admin/add_treatment.php", 
    datatype:"json", 
    data: postData, 

    success: function(data) {    
     var parseData = JSON.parse(result); 
     var datalength = parseData.length; 
     for(var i=0; i < datalength; i++){ 
      var staffId = parseData[i].consultant_id; 
      var staffLength = staffId.length; 
      for (var j=0;j<6-staffLength;j++) { 
       staffId = "0"+staffId; 
      } 
      staffId = staffPrefix+staffId; 
      tblPatientDiagnosed.fnAddData([staffId,'data1','data2','data3']);//write the varibale or data you got from ajax 
     } 
    } 
    }); 
});

fnadddata添加一行

来源

2016-10-10 07:11:04

你可以采取的Foo table plugin帮助解决你的问题，它为我工作得很好。并有许多分类筛选，你可以使用你的表内置功能。

来源

2016-10-10 07:52:11

如何用json数据和ajax创建动态jQuery数据表？

回答

相关问题