javascript - 用动态列填充 jquery 数据表

Question

我正在使用数据表，我想用动态列填充表。列将根据“订单”属性显示。行通过属性“Id_Col”映射到列，“RowIdx”对应于行的索引。我想填充数据表选项：“列”和“数据”我的 json 对象如下：

我希望能得到你的帮助。先感谢您！

{
    "Col": [
        {
            "Id_Col": 1,
            "Col_Name": "Col 1",
            "Order": 1
        },
        {
            "Id_Col": 2,
            "Col_Name": "Col 2",
            "Order": 2
        },
        {
            "Id_Col": 3,
            "Col_Name": "Col 3",
            "Order": 3
        },
        {
            "Id_Col": 4,
            "Col_Name": "Col 4",
            "Order": 4
        }
    ],
    "Row": [
        {
            "Id_Col": 1,
            "RowIdex": 1,
            "Val": "Row 1 col 1"
        },
        {
            "Id_Col": 2,
            "RowIdex": 1,
            "Val": "Row 1 col 2"
        },
        {
            "Id_Col": 3,
            "RowIdex": 1,
            "Val": "Row 1 col 3"
        },
        {
            "Id_Col": 4,
            "RowIdex": 1,
            "Val": "Row 1 col 4"
        },
        {
            "Id_Col": 1,
            "RowIdex": 2,
            "Val": "Row 2 col 1"
        },
        {
            "Id_Col": 2,
            "RowIdex": 2,
            "Val": "Row 2 col 2"
        },
        {
            "Id_Col": 3,
            "RowIdex": 2,
            "Val": "Row 2 col 3"
        },
        {
            "Id_Col": 4,
            "RowIdex": 2,
            "Val": "Row 3 col 4"
        },
        {
            "Id_Col": 1,
            "RowIdex": 3,
            "Val": "Row 3 col 1"
        },
        {
            "Id_Col": 2,
            "RowIdex": 3,
            "Val": "Row 3 col 1"
        },
        {
            "Id_Col": 3,
            "RowIdex": 3,
            "Val": "Row 3 col 2"
        },
        {
            "Id_Col": 4,
            "RowIdex": 3,
            "Val": "Row 3 col 3"
        }
    ]
}

标签： javascriptjquerydatatables

Answer 1

如果Order是列位置并且Id_Col是列引用，我们可以映射这些 Col 和 Row 对象以重新排序和重新构造以满足 Datatable 对象/数组源。

您可以参考这里： https ://datatables.net/examples/data_sources/js_array.html

随意运行以下示例演示：

var rawdata = { Col:
   [ { Id_Col: 1, Col_Name: 'Col 1', Order: 5 },
     { Id_Col: 5, Col_Name: 'Col 5', Order: 1 },
     { Id_Col: 2, Col_Name: 'Col 2', Order: 2 },
     { Id_Col: 3, Col_Name: 'Col 3', Order: 3 },
     { Id_Col: 4, Col_Name: 'Col 4', Order: 4 } ],
  Row:
   [ { Id_Col: 1, RowIdex: 1, Val: 'Row 1 col 1' },
     { Id_Col: 2, RowIdex: 1, Val: 'Row 1 col 2' },
     { Id_Col: 3, RowIdex: 1, Val: 'Row 1 col 3' },
     { Id_Col: 4, RowIdex: 1, Val: 'Row 1 col 4' },
     { Id_Col: 1, RowIdex: 2, Val: 'Row 2 col 1' },
     { Id_Col: 2, RowIdex: 2, Val: 'Row 2 col 2' },
     { Id_Col: 3, RowIdex: 2, Val: 'Row 2 col 3' },
     { Id_Col: 4, RowIdex: 2, Val: 'Row 3 col 4' },
     { Id_Col: 1, RowIdex: 3, Val: 'Row 3 col 1' },
     { Id_Col: 2, RowIdex: 3, Val: 'Row 3 col 1' },
     { Id_Col: 3, RowIdex: 3, Val: 'Row 3 col 2' },
     { Id_Col: 4, RowIdex: 3, Val: 'Row 3 col 3' },
     { Id_Col: 5, RowIdex: 1, Val: 'Row 1 col 5' },
     { Id_Col: 5, RowIdex: 2, Val: 'Row 2 col 5' },
     { Id_Col: 5, RowIdex: 3, Val: 'Row 3 col 5' }
   ] };

var newCol=[];
var newData=[];
var colId_to_OrderIndex=[];

for (var i = 0; i < rawdata.Col.length; i++){
   var ColOrderIndex = rawdata.Col[i].Order-1;
   var ColId = rawdata.Col[i].Id_Col;
   var ColName = rawdata.Col[i].Col_Name;

    newCol[ColOrderIndex] = {
      "title" : ColName
    };

    colId_to_OrderIndex[ColId] = ColOrderIndex;
}

for (var i = 0; i < rawdata.Row.length; i++){
    var RowOrderIndex = rawdata.Row[i].RowIdex-1;
    var RowColId = rawdata.Row[i].Id_Col;
    var ColVal = rawdata.Row[i].Val;
    var MapColId = colId_to_OrderIndex[RowColId];
    
    if(newData[RowOrderIndex]===undefined){
      newData[RowOrderIndex]=[];
    }
    
    newData[RowOrderIndex][MapColId]= ColVal;
}

console.log(rawdata);
console.log(newCol);
console.log(newData);

$(document).ready(function() {
    $('#example').DataTable( {
        data: newData,
        columns: newCol
    } );
} );

<link href="https://cdn.datatables.net/1.10.19/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://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


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