使用 DataTables 显示 JSON 对象答案

【问题标题】：Display JSON object using DataTables使用 DataTables 显示 JSON 对象
【发布时间】：2023-04-10 05:43:02
【问题描述】：

我正在尝试使用 DataTables 显示 JSON 结果，但是最后我得到了空白表。当我检查浏览器控制台日志时，我可以看到正在将对象数组传递给显示函数，但在那之后，什么都没有发生。

HTML 部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="functions.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>

    <div class="container">
        <form>
            <div class="form-group row">
              <label for="foodLabel" class="col-sm-2 col-form-label">Search For Food Label</label>
              <div class="col-sm-10">
                <input class="form-control" type="search" id="foodLabel">
              </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default" type="submit" id="submit" onclick="getFormData(); return false;">Submit</button>
                </div>
            </div>
        </form>
    </div>

    <table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
    </table>

  </body>
</html>

JS部分：

function getFormData(){ 
    var foodLabel=document.getElementById('foodLabel').value;
    document.getElementById('foodLabel').value = "";
    var searchURL = buildSearchURL(foodLabel);
    console.log(searchURL);

    $.getJSON(searchURL, function(data){
        //console.log(data);
        //console.log(data.list.item);
        display(data.list.item);
    });

}

function buildSearchURL(label){
    var searchURL = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + label + "&sort=n&max=25&offset=0&api_key=DEMO_KEY";
    return searchURL;
}

function display(data){
    console.log(data);
    $(document).ready(function() {
        $('#example').DataTable( {
            "json": data,
            "columns": [
                {"item": "name"}
            ]
        } );
    } );    
}

我在这里遗漏的东西一定很明显。

我设法弄清楚了这一点，显然，Datatables 库对其进行了调用，因此我更改了显示功能：

function display(searchURL){
    //console.log(data);
    $(document).ready(function() {
        $('#example').DataTable( {
            ajax: {
                url: searchURL,
                dataSrc: 'list.item'
            },
            columns: [
                {data: "name"}
            ]
        } );
    } );    
}

【问题讨论】：

标签： javascript jquery html json datatables

【解决方案1】：

显示功能中无法访问变量searchURL，试试这个：

function display(searchURL){
    //console.log(data);
    $(document).ready(function() {
        $('#example').DataTable( {
            ajax: {
                 url:buildSearchURL(document.getElementById('foodLabel').value),
                dataSrc: 'list.item'
            },
            columns: [
                {data: "name"}
            ]
        } );
    } );    
}

【讨论】：