Question

我想基于JSON响应在数据表中生成数据。以下是我的JSON响应：

{
  "alertItems": [
    {
      "id": "PROD-115388",
      "errors": [
       "Original Estimate is null",
       "id is null"          
      ],
      "warnings": [
        "Original Estimate is above threshold",
        "Story points are above threshold",
        "These sub tasks are not defined."
      ]
    },
    {
      "id": "PROD-112479",
      "errors": [],
      "warnings": [
        "Original Estimate is above threshold",
        "Story points are above threshold",
        "Estimate is missing for these sub tasks : PROD-112329"
      ]
    },
    {
      "id": "PROD-108461",
      "errors": [],
      "warnings": [
        "Original Estimate is above threshold",
        "Story points are above threshold",
        "These sub tasks are not defined : Test Case, BA Documentation Task, QA Design and Execute Task, BA/QA/Dev, BA Testing Task, QA Documentation Task, Elaboration"
      ]
    }
  ],
  "numberOfErrors": 0,
  "numberOfWarnings": 10
}

我想生成如下表：

我有一系列警告和错误。我想针对其ID为每个警告/错误生成一行。如何在jQuery datatables中做到这一点？

Answer 1

解决方案是先转换数据，然后使用ajax.dataSrc选项将其传递到DataTables。该解决方案的另一个组件是第三方 rowsGroup 扩展名，它允许对具有相同数据的行进行分组。

var table = $('#example').DataTable({
   'ajax': {
      'url': 'https://api.myjson.com/bins/1b72lv',
      'dataSrc': function ( data ) {
         var resultData = [];

         if(data.hasOwnProperty('alertItems')){
            $.each(data.alertItems, function( index, record ) {
               $.each(record.errors, function( index, message ) {
                  resultData.push([ record['id'], 'Error', message ]);
               });

               $.each(record.warnings, function( index, message ) {
                  resultData.push([ record['id'], 'Warning', message ]);
               });
            });
         }

         return resultData;
      }
   },
   'rowsGroup': [0]
});

有关代码和演示，请参见this example。

有关{b> rowsGroup 扩展名的详细信息，请参见jQuery DataTables: ROWSPAN in table body TBODY。

Answer 2

您可以使用ajax.dataSrc选项指定将数据转换为所需格式的回调函数：

const transform = data => 
    data.alertItems
        .map(({id, errors, warnings}) => 
            [...errors.map(error => ({id, type: 'error', reason: error})),
            ...warnings.map(warning => ({id, type: 'warning', reason:warning}))])
        .flat();

为了通过匹配第一列中的ID对表行进行分组，您可以使用drawCallback函数中的rowspan HTML属性集（为此，您需要确保表行的排序顺序是固定的，因此具有相同ID的项目将按顺序进行，而与排序/过滤无关）。

因此，完整的示例（带有ajax部分的注释已被删除，因为在实时代码段中不可用）可能看起来像：

//original JSON
const srcJSON = {"alertItems":[{"id":"PROD-115388","errors":["Original Estimate is null","id is null"],"warnings":["Original Estimate is above threshold","Story points are above threshold","These sub tasks are not defined"]},{"id":"PROD-112479","errors":[],"warnings":["OriginalEstimateisabovethreshold","Storypointsareabovethreshold","Estimateismissingforthesesubtasks: PROD-112329"]},{"id":"PROD-108461","errors":[],"warnings":["OriginalEstimateisabovethreshold","Storypointsareabovethreshold","Thesesubtasksarenotdefined: TestCase, BADocumentationTask, QADesignandExecuteTask, BA/QA/Dev, BATestingTask, QADocumentationTask, Elaboration"]}],"numberOfErrors":0,"numberOfWarnings":10};

//proper JSON
const transform = data => data.alertItems.map(({id, errors, warnings}) => [...errors.map(error => ({id, type: 'error', reason: error})),...warnings.map(warning => ({id, type: 'warning', reason:warning}))]).flat();

//datatables init
$('table').DataTable({
/*
  ajax: {
    url: //url to API endpoint returning original JSON
    method: //http method (GET, POST, etc)
    dataSrc: transform(data)
  }
*/
  data: transform(srcJSON),     //this one should be dropped once ajax section uncommented
  paging: false,
  orderFixed: [0,'asc'],
  columns: [
    {data: 'id', title: 'Story Id'},
    {data: 'type', title: 'Type'},
    {data: 'reason', title: 'Warning Reason'}
  ],
  //group by first col, using rowspan attribute
  drawCallback: function(){
	//clean up the view
	$('tbody td').attr('rowspan',1).show();
	//grab datatable into variable
	const table = this.api();
	//grab visible, sorted table rows
	const rows = table.rows({search:'applied',order:'current'}).nodes();
	var groupIdTd = null;
	//run through the table rows and set 'rowspan' attribute for matching id's
	$.each(rows, function(idx){
		const rowspan = Number($(groupIdTd).attr('rowspan') || 1);
		idx > 0 && table.cell(groupIdTd).data() == table.cell(this,0).data() ?
		($(groupIdTd).attr('rowspan', rowspan+1), $(table.cell(this,0).node()).hide()) :
		(groupIdTd = table.cell(this,0).node(), $(groupIdTd).attr('rowspan',1));
	});
  }
})

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" />
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script>
  <script src="test.js"></script>
</head>
<body>
 <table></table>
</body>
</html>

如何动态生成表并对行进行分组

2 个答案: