javascript - 在 DataTable 上表示 Json 对象数据对我来说不起作用-6ren

javascript - 在 DataTable 上表示 Json 对象数据对我来说不起作用

转载作者：行者123 更新时间：2023-12-03 02:21:52

我正在开发一个java web应用程序(Spring Frame work)。一旦点击某个 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>

当我查看控制台时，我可以看到以下内容:

这是我得到的错误

这是我的 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 在 ajax 请求后一微秒被初始化。

发送 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>";
        }
      }
    ]

  });


});

关于javascript - 在 DataTable 上表示 Json 对象数据对我来说不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49121589/

文章推荐： javascript - 连接打印机名称与 javascript 时出错

文章推荐： javascript - 取消隐藏单选按钮选择上的 Div 标签

文章推荐： javascript - 使用 MongoDB 和 Nodejs 传递两个查询

datatables - dataTable() 与 DataTable() - 为什么有区别以及如何让它们一起工作？
该插件的绝大多数文档表明您可以使用对其进行初始化 $('#example').dataTable(); 但是http://www.datatables.net/examples/api/multi_
datatables - 如何在列中实现新行(DataTables)
我有一个 SQL 查询，它获取一些数据(dbtable 表中的语言列)。查询使用 GROUP_CONCAT，因此一个单元格有多个结果，例如 "Ajax, jQuery, HTML, CSS". 我想要
datatables - DataTables 如何确定列类型
我有一个由 jQuery DataTables 增强的动态表，它显示一个与此类似的自定义对象 example . JSON: { "data": [ { "name": "Ti
c# - 我们如何将一个 DataTable 的列数据复制到另一个 DataTable，即使 DataTable 之间的列名不同？
我有两个数据表。首先是 DataTable NameAddressPhones = new DataTable(); 具有三列姓名、地址和电话号码。但我只想要两列姓名和地址数据，所以我想将这些列(包含
datatables - 将处理语言放在 DataTable 之上
有没有办法将“处理...”语言放在 DataTable 对象的顶部而不是垂直中间？如果我有一张长 table ，它会隐藏在页面之外，因为它的默认位置在中间。 $('#example').dataTab
datatables - 防止 DataTables 自定义过滤器影响页面上的所有表
当我们向 DataTables 添加自定义过滤器时: $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { ..
datatables - 我们如何更改 DataTables 中搜索字段的宽度
我可以更改 dataTables 中搜索文本字段的宽度吗？我现在正在编写以下代码，但它不起作用。 $('#example').dataTable() .columnFilter(
jquery-datatables - DataTables 使分页和显示计数出现在顶部
使用 DataTables plugin 时如何使分页和 Showing 1 to 8 of 8 entries 出现在顶部而不是底部？谢谢最佳答案每个数据表控件都以唯一的 id 命名计划之后
Angular DataTables : $(. ..).DataTable 不是函数
Angular 版本:6.0.4 ~ 节点版本:10.4.1 ~ NPM 版本:6.1.0 我看到这个问题被问了很多次，但没有回答。关注这些后instructions to install angu
datatables - 如何在单击按钮时在 DataTable 中设置单元格值
当单击外部按钮时，我正在尝试使用 DataTable(新版本)修改单元格值。我现在有以下内容: $(document).on('click', '.dropdown-menu li a', funct
datatables - jQuery dataTables 页面信息
引用:http://datatables.net/reference/api/page.info() 我正在尝试获取 ajax POST 生成的 jQuery DataTable 的当前分页信息。使
datatables - 提示页号jQuery dataTables 页面更改事件
以下对我有用: $('#datatable').on('page.dt', function() { alert("changed"); }); 每当我更改页面时，都会显示警报。但是如果我想警
datatables - Jquery DataTables 排除具有特定类的行
我有一个 HTML 表，我在其中应用了 DataTables 函数。我使用表的第一行并将"template"类应用为我的模板行。然后选择此格式并使用 JSON feed 填充表中的所有行。问题是 Da
datatables - 如何防止 DataTables 根据过时的保存状态显示或隐藏列
我有一个由 DataTables 1.10 驱动的表。过滤已打开。当我在下面谈论“做搜索”时，我指的是使用该表的过滤功能。问题描述关闭 stateSave 一切正常。但是，当 stateSave
datatables - jQuery dataTables - 清除列上的搜索
看看这个例子，http://www.datatables.net/examples/api/multi_filter_select.html ，它使用 DataTable API 中的 columns
jQuery DataTables - 无法重新初始化 DataTable
我正在使用 jQuery DataTables 在 spring 4.x 应用程序中创建一个报表页面来呈现报表。通过 Jackson 消息转换器解析后，服务器返回以下对象。 { "data"
datatable - Primefaces dataTable 不刷新内容
我在刷新 Primesfaces 的延迟加载数据表时遇到了一些问题。我正在使用 3.0.M4。使用过滤器在您的示例中使用三个类。还尝试了仅使用延迟加载的示例，但随后未在 Controller 中重新
C# - DataTable 中的 DataTable
在 Blue Prism (BP) 中，有一种叫做 Collection 的东西，它基本上是 C# 中的 DataTable。在 BP 中，您可以在集合中拥有集合。我的问题是，您可以在 C# 的 Da
datatable - Flutter DataTable - 点击行
我正在使用 Flutter DataTables 来显示购物车中的商品列表。现在我想编辑任何选定行的数量。有没有办法获取用户点击的行信息？以下是我的DataTable的完整代码: class _Da
将 primefaces dataTable 与 org.primefaces.component.datatable.DataTable 绑定(bind)；
我有一个关于 primefaces 数据表组件的问题。我想将 DataTable 变量绑定(bind)到 p:dataTable，以便我能够从支持 bean 以编程方式操作第一个、行、rowsPerP

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 DataTable 上表示 Json 对象数据对我来说不起作用