Fill jquery datatables with dynamic columns

Question

I'm working with datatables and I want to fill a table with dynamic columns. The columns will be display according to the "Order" property. The rows are mapped to the columns by the property "Id_Col" and the "RowIdx" corresponds to the index of the row. I want to populate the datatable options :"columns" and "data" My json object is as follows :

I hope to have your help. Thank you in advance!

{
    "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"
        }
    ]
}

Did your working with datatables give any output except for this piece of data? Is there any relevant piece of code you might share to show what exactly you try to achieve and what did you stumble upon? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jul 19, 2019 at 13:24

mike85 · Accepted Answer · 2019-07-21 06:50:35Z

If Order is column position and Id_Col is column reference, we can map these Col and Row object to reorder and restructure back to meet Datatable objects/arrays source.

You can refer here: https://datatables.net/examples/data_sources/js_array.html

Feel free to run below sample demo:

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>

Collectives™ on Stack Overflow

Fill jquery datatables with dynamic columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related