jQuery - 动态数据表 - 数据 JSON

Question

我想创建一个包含动态列和数据的数据表。
我的html代码：

<body>
    <table id="example" class="display">
    </table>
</body>

我的data.json：

{
    "Category": {
        "0": "Bags",
        "1": "Shoes",
        "2": "School",
        "3": "Video-Games",
        "4": "PC-Games"
    },
    "Price": {
        "0": 10,
        "1": 20,
        "2": 30,
        "3": 40,
        "4": 50
    }
}

在这一点上，我希望类别和价格成为列。

我的js代码是：

$(document).ready(function name(params) {
    $.ajax({
        url: "data.json",
        method: 'get',
        dataType: 'json',
        success: function (response) {
            var columns = Object.keys(response).map(function (key) {
                return { title: key };
            });

            $('#example').DataTable({
                data: Object.values(response),
                columns: columns
            });
        },
        error: (error) => {
            console.log(JSON.stringify(error));
        }
    });
});

我想要下面的结果

但是我收到了这个：

Answer 1

文档建议使用略有不同的

data

和

columns

格式。
对于每一列，您必须指定要使用的 data 及其 title
每行都必须是一个由分配的列

data

键入的对象。

我承认 DataTables 文档导航起来有点不直观......但它非常完整。

下面是 Ajax

success

回调中应该包含的代码。

const data = {
  "Category": {
    "0": "Bags",
    "1": "Shoes",
    "2": "School",
    "3": "Video-Games",
    "4": "PC-Games"
  },
  "Price": {
    "0": 10,
    "1": 20,
    "2": 30,
    "3": 40,
    "4": 50
  }
}

const columnKeys = Object.keys(data)
const columns = columnKeys.map((column) => ({title: column, data: column}))
const rowKeys = Object.keys(data[columnKeys[0]])
const rows = rowKeys.map((rowKey) => {
  const row = {}
  columnKeys.forEach((columnKey) => row[columnKey] = data[[columnKey]][rowKey])
  
  return row
})

//console.log(columnKeys)
console.log(columns)
//console.log(rowKeys)
console.log(JSON.stringify(rows))

$('#example').DataTable({
  data: rows,
  columns: columns
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<body>
  <table id="example" class="display">
  </table>
</body>

Answer 2

如果要带动态表，需要用for返回每一列和数据，并push到列中。

 var data = {
  "Category": {
    "0": "Bags",
    "1": "Shoes",
    "2": "School",
    "3": "Video-Games",
    "4": "PC-Games"
  },
  "Price": {
    "0": 10,
    "1": 20,
    "2": 30,
    "3": 40,
    "4": 50
  }
}
 var columns = [];
 columnNames = Object.keys(data[0]);
  for (var i in columnNames) {
     columns.push({
         data: columnNames[i],
         title: columnNames[i]
     });
 }
$('#example').DataTable({
   "data": data,
  "columns": columns
});


  <table id="example" class="table table-borderless table-hover" data-toggle="data-table" style="width:100%;" width="100%"> </table>

这是简单的方法。

jQuery - 动态数据表 - 数据 JSON

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

2个回答

最新问题

jQuery - 动态数据表 - 数据 JSON

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

2个回答

最新问题

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