jQuery DataTable 添加动态列 [英] jQuery DataTable add dynamic columns

问题描述

我有一个像下面这样的 JSON 对象(dataSource)，在那个 JSON 对象中，属性viewClasses"有时是空白的，这里我想要做的是如果viewClasses"有任何记录，我想添加一个动态列到表和列标题的名称将是 'viewClasses.class' 的值，我已经尝试了下面的代码，但它没有按预期工作.

这是下面代码的结果 -

这就是我想要的 -

var dataSource = [{"名称": "PI61890","portfolioName": "PGIM 新兴市场债务本币基金","StartDate": "2020-10-31T00:00:00","EndDate": "2020-10-31T00:00:00","processDate": "2020-10-31T00:00:00",查看详情": {"名称": "管理","代码": "MGMT","类别": "资产","description": "资产描述",视图类":[{"class": "A",金额":2000.0},{"class": "B",金额":3000.0}]},}];var 列 = [];函数添加列(){$.each(dataSource[0].viewDetails.viewClasses[0], function(key, value) {var my_item = {};my_item.data = 键；my_item.title = 键；column.push(my_item);});}$('#example').dataTable({数据:dataSource[0].viewDetails.viewClasses，列":列，分页":假，bInfo":假});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script><style src="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"></style><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><div class="容器"><div class="row"><div class="col-md-12"><table id="example" class="table table-striped" width="100%"></table>

解决方案

您的源数据需要以两种不同的方式进行迭代，以构建 DataTables 需要的两种不同的动态数组:- 列数据和行数据.

首先你有两列，A 和 B.要为这些构建数组，您可以使用以下命令:

var dynamicColumns = [];columnData.forEach(function (columnItem) {//提取列定义:var dynamicColumn = {};dynamicColumn['data'] = columnItem['class'];dynamicColumn['title'] = '标题' + columnItem['class'];dynamicColumns.push(dynamicColumn);});

我选择不使用 jQuery 迭代器，因为我想访问数组中的每个对象.

这给了我以下结构:

<预><代码>[{数据":A"，标题":标题 A"},{数据":B"，标题":标题B"}]

但是对于表格的数据，我想最终只有一行数据:

var dynamicRow = {};columnData.forEach(function (columnItem) {//提取数据集:var field = columnItem['class'];var value = columnItem['amount'];动态行[字段] = 值；});dynamicRows.push(dynamicRow);

在这里，我最终得到以下内容:

<预><代码>[{A":2000，B":3000}]

现在我有了 DataTable 初始化所需的结构.因此，整个脚本如下:

最终结果如下(在我的测试环境中):

I have a JSON object like below (dataSource) in that JSON object the property 'viewClasses' sometimes comes as blank, here what I want to do is if 'viewClasses' have any record I want to add a dynamic column to the table and the name of the column header will be the value of 'viewClasses.class', I have tried the below code but it's not working as expected.

Here is the result of the below code -

Here how I want this to be-

var dataSource = [{
  "Name": "PI61890",
  "portfolioName": "PGIM Emerging Markets Debt Local Currency Fund",
  "StartDate": "2020-10-31T00:00:00",
  "EndDate": "2020-10-31T00:00:00",
  "processDate": "2020-10-31T00:00:00",
  "viewDetails": {
    "Name": "Management",
    "Code": "MGMT",
    "category": "Asset",
    "description": "Asset Description",
    "viewClasses": [{
        "class": "A",
        "amount": 2000.0
      },
      {
        "class": "B",
        "amount": 3000.0
      }
    ]
  },
}];

var column = [];

function AddColumn() {
  $.each(dataSource[0].viewDetails.viewClasses[0], function(key, value) {
    var my_item = {};
    my_item.data = key;
    my_item.title = key;
    column.push(my_item);
  });
}

$('#example').dataTable({
  data: dataSource[0].viewDetails.viewClasses,
  "columns": column,
  "paging": false,
  "bInfo": false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<style src="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table id="example" class="table table-striped" width="100%"></table>
    </div>
  </div>
</div>

解决方案

Your source data needs to be iterated in two different ways, to build the two different dynamic arrays which DataTables needs: - column data and row data.

Firstly you have two columns, A and B. To build the array for these, you can use the following:

var dynamicColumns = [];

columnData.forEach(function (columnItem) {
  // extract the column definitions:
  var dynamicColumn = {};
  dynamicColumn['data'] = columnItem['class'];
  dynamicColumn['title'] = 'Heading ' + columnItem['class'];
  dynamicColumns.push(dynamicColumn);
});

I chose not to use the jQuery iterator because I want access to each object in the array.

This gives me the following structure:

[
  {
    "data": "A",
    "title": "Heading A"
  },
  {
    "data": "B",
    "title": "Heading B"
  }
]

But for the table's data, I want to end up with only one row of data:

var dynamicRow = {};
  
columnData.forEach(function (columnItem) {
  // extract the data set:
  var field = columnItem['class'];
  var value = columnItem['amount'];
  dynamicRow[field] = value;
});
dynamicRows.push(dynamicRow);

Here, I end up with the following:

[
  {
    "A": 2000,
    "B": 3000
  }
]

Now I have the structures I need for my DataTable initialization. The overall script therefore is as follows:

<script type="text/javascript">

var dataSource = [{
  "Name": "PI61890",
  "portfolioName": "PGIM Emerging Markets Debt Local Currency Fund",
  "StartDate": "2020-10-31T00:00:00",
  "EndDate": "2020-10-31T00:00:00",
  "processDate": "2020-10-31T00:00:00",
  "viewDetails": {
    "Name": "Management",
    "Code": "MGMT",
    "category": "Asset",
    "description": "Asset Description",
    "viewClasses": [{
        "class": "A",
        "amount": 2000.0
      },
      {
        "class": "B",
        "amount": 3000.0
      }
    ]
  },
}];

var dynamicColumns = [];
var dynamicRows = [];

function buildDynamicData() {

  var columnData = dataSource[0].viewDetails.viewClasses;
  
  var dynamicRow = {};
  
  columnData.forEach(function (columnItem) {
    // extract the column definitions:
    var dynamicColumn = {};
    dynamicColumn['data'] = columnItem['class'];
    dynamicColumn['title'] = 'Heading ' + columnItem['class'];
    dynamicColumns.push(dynamicColumn);
    
    // extract the data set:
    var field = columnItem['class'];
    var value = columnItem['amount'];
    dynamicRow[field] = value;
  });
  dynamicRows.push(dynamicRow);

}

buildDynamicData();

console.log(dynamicColumns);
console.log(dynamicRows);

  $(document).ready(function() {
  
$('#example').DataTable({
  columns: dynamicColumns,
  data: dynamicRows,
  paging: false,
  info: false
});


  } );

</script>

And the end result looks like this (in my test environment):

这篇关于jQuery DataTable 添加动态列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！