在DataTable上表示Json对象数据对我不起作用

问题描述 投票：0回答：1

我正在研究一个java Web应用程序（Spring Frame工作）。命中某个URL后，将创建一个Json对象。我可以访问这些数据，然后我可以使用console.log来访问它。但我需要以表格格式显示这个Json对象，该对象是一个超过1000条记录的数组。我不确定的是如何做到这一点。我已经用过这个教程（https://datatables.net/examples/ajax/null_data_source.html）来做一些事情，但我没有成功。我对这个概念很新，我的问题可能真的是转储。但我想知道也许我可以从这里得到一些帮助。

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
>    
<h:head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src ="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <link rel="stylesheet" href="resource/css/jquery.dataTables.min.css"></link>

</h:head>

<h:body>
    <button id="processData">ProcessData</button>



    <div id="wrapper">
        <div id="header">
            <h2>List of processed data</h2>
        </div>
    </div>



    <table id="dataTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID1</th>
                <th>ID2</th>
                <th>Number Of Matching Terms</th>
                <th>Matching Terms </th>
                <th>Original Terms in Data Source One</th>
                <th>Original Terms in Data Source Two</th>
                <th>Acceptance Action</th>
                <th>Decline Action</th>

            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>ID1</th>
                <th>ID2</th>
                <th>Number Of Matching Terms</th>
                <th>Matching Terms </th>
                <th>Original Terms in Data Source One</th>
                <th>Original Terms in Data Source Two</th>
                <th>Acceptance Action</th>
                <th>Decline Action</th>
            </tr>
        </tfoot>
    </table>

    <script src="js/mainJs.js"></script>

</h:body>

这是我的js代码：

$(document).ready(function(){

    $("#processData").click(function (){
        $.getJSON('http://localhost:8080/gtlc/PVJson', function(data){
            console.log(data);

        });

        var table = $('#dataTable').DataTable( {
            "ajax": data,
            "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": "<button>Click!</button>"
            } ]
        });

    })  

});

</html>

当我看到我的控制台时，我可以看到以下内容：

enter image description here

这是我得到enter image description here的错误

这是我的json对象的一个​​小样本

"records": [{
    "id1": 1200314690100003429,
    "id2": 1045,
    "matchingTerms": ["adaptor"],
    "orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
    "orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for People Soft", "Customized software for SAP, therefore version not specified"]
}, {
    "id1": 1200314690100003429,
    "id2": 1046,
    "matchingTerms": ["adaptor"],
    "orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
    "orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for Oracle", "Customized software for SAP, therefore version not specified"]
}]

我想知道是否有人可以给我一些提示，告诉我如何抓住json对象并在dataTable上表示它

javascript jquery json datatables
1个回答
1
投票

问题是在ajax请求之后，DataTable被初始化了一微秒。

发送Ajax请求时，可能需要1,2,3或10秒才能返回数据...因此，在Ajax响应返回之前，data是未定义的。

在回调函数中移动DataTable初始化它应该工作。

FIDDLE

$(document).ready(function() {
  var data = {
    "records": [{
      "id1": 1200314690100003429,
      "id2": 1045,
      "matchingTerms": ["adaptor"],
      "orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
      "orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for People Soft", "Customized software for SAP, therefore version not specified"]
    }, {
      "id1": 1200314690100003429,
      "id2": 1046,
      "matchingTerms": ["adaptor"],
      "orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
      "orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for Oracle", "Customized software for SAP, therefore version not specified"]
    }]
  };
  var table = $('#dataTable').DataTable({
    "data": data.records,
    "columns": [{
        "data": "id1"
      },
      {
        "data": "id2"
      },
      {
        "data": "matchingTerms",
        "render": function(data, type, row, meta) {
          return data.length;
        }
      },
      {
        "data": "matchingTerms"
      },
      {
        "data": "orginalTermsTable1"
      },
      {
        "data": "orginalTermsTable2"
      },
      {
        "data": "",
        "render": function(data, type, row, meta) {
          return "<button>Click</button>";
        }
      },
      {
        "data": "",
        "render": function(data, type, row, meta) {
          return "<button>Click</button>";
        }
      }
    ]

  });

});

更好的方案：

FIDDLE

$(document).ready(function() {
  var table = $('#dataTable').DataTable({
    "ajax": {
        "url" : "http://localhost:8080/gtlc/PVJson",
      "dataSrc" : "records"
    },
    "columns": [{
        "data": "id1"
      },
      {
        "data": "id2"
      },
      {
        "data": "matchingTerms",
        "render": function(data, type, row, meta) {
          return data.length;
        }
      },
      {
        "data": "matchingTerms"
      },
      {
        "data": "orginalTermsTable1"
      },
      {
        "data": "orginalTermsTable2"
      },
      {
        "data": "",
        "render": function(data, type, row, meta) {
          return "<button>Click</button>";
        }
      },
      {
        "data": "",
        "render": function(data, type, row, meta) {
          return "<button>Click</button>";
        }
      }
    ]

  });


});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.