用動態列填充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"
        }
    ]
}

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>