时间戳

首页 > 解决方案 > 如何在数据表 json 中使用标题数据？

javascript - 如何在数据表 json 中使用标题数据？

问题描述

我希望表格标题和表格正文使用 url 来读取数据。

如 "language": {url:'https://cdn.datatables.net/plug-ins/1.10.25/i18n/English.json'},


$(document).ready(function () {


 $('#example').DataTable({ 

  "language": {url:'https://cdn.datatables.net/plug-ins/1.10.25/i18n/English.json'},

  lengthMenu: [25, 50, 75, 100],


  data: {url:'/dataSet.json'},
  columns: {url:'/columns.json'}
  });
  
});



$(document).ready(function () {


 var dataSet = [
{"name":"name1","name2":"name2"},
{"name":"name1","name2":"name2"},
];

$('#example').DataTable({ 
 "language": {url:'https://cdn.datatables.net/plug-ins/1.10.25/i18n/English.json'},

  lengthMenu: [25, 50, 75, 100],
 

  data: dataSet,
  columns: [

{ title:"Title1",data: "name" },
{ title:"Title2",data: "name2" }

  
  ]
  
 });
  
});
 tfoot {

  display: table-header-group;
}
 }
 <!DOCTYPE html>
<html>
  <head>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<!-- Select2 plugin -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<!-- Select2 plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>

  </head>
  <body>

<div class="container">
 <table id="example" width="100%"></table>

 </div>
 </body>
</html>

怎么能这样做？

任何帮助，将不胜感激。

标签： javascriptjquerydatatable

解决方案

这是一个使用 jQueryajax方法的示例：

假设我们有一个返回以下 JSON 的 URL：

{
  "responseData": {
    "headings": [
      {
        "title": "Name",
        "data": "name"
      },
      {
        "title": "Position",
        "data": "position"
      },
      {
        "title": "Salary",
        "data": "salary"
      },
      {
        "title": "Start Date",
        "data": "start_date"
      },
      {
        "title": "Office",
        "data": "office"
      },
      {
        "title": "Age",
        "data": "age"
      }
    ],
    "body": [
      {
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "age": "23"
      },
      {
        "name": "Lael Greer",
        "position": "Systems Administrator",
        "salary": "$103,500",
        "start_date": "2009/02/27",
        "office": "London",
        "age": "24"
      },
      {
        "name": "Jonas Alexander",
        "position": "Developer",
        "salary": "$86,500",
        "start_date": "2010/07/14",
        "office": "San Francisco",
        "age": "54"
      },
      {
        "name": "Shad Decker",
        "position": "Regional Director",
        "salary": "$183,000",
        "start_date": "2008/11/13",
        "office": "Edinburgh",
        "age": "43"
      }
    ]
  }
}

整体结构可以概括为：

{
  "responseData": {
    "headings": [ { ... }, { ... }, ... ],
    "body": [ { ... }, { ... }, ... ]
  }
}

现在，我们在 JSON 的一个部分中拥有所有数据行所需的数据，在另一部分中拥有标题（列标题）。

DataTable 可以从 jQueryajax调用中获取这些数据：

$(document).ready(function() {

  $.ajax({
      url: "YOUR_URL_GOES_HERE",
    method: "POST",
    success: function(json) {
      initializeDataTable(json);
    }
  });

  function initializeDataTable(json) {
    $('#example').DataTable( {
      "data": json.responseData.body,
      "columns": json.responseData.headings
    } );
  }

} );

HTML 表就是这样的：

<table id="example" class="display" style="width:100%"></table>

因此，现在 HTML 或 DataTable 定义中的任何地方都没有特定的列名。所有这些数据都由 JSON 提供。

您可以向 JSON 添加更多数据，以控制 DataTable 的其他方面 - 例如，初始排序顺序等。

推荐阅读