How to add rows dynamically to datatable using jquery ajax call

Question

I want to add rows dynamically to datatable using jquery ajax call and while adding rows dynamically I'm getting the caught TypeError: Cannot read properties of undefined (reading 'style') error but I didn't understand this error and I unable to resolve this error. This is what I have tried so far Using CDN links are :- <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css">

<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css">
 <link href="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js" type="text/javascript"
            charset="utf8"></script>
        <script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>

HTML:-

<table class="viewportcmntbl table responsive tdmaintbl dtr-inline dataTable" id="DataTables_Table_0"> <thead> <tr class="rectblnobreakhead" role="row"> <th>Scrip Name</th> <th>B/S</th> <th>Qty</th> <th>Entry Price (<i class="fa fa-inr"></i>)</th> <th>Tgt</th> <th>SL</th> <th>LTP</th> <th>TPL</th> <th>Inv.</th> <th>Period</th> <th>Entry Time</th> <th>Max PL</th> <th>Max PL %</th> <th>Status</th> </tr> </thead> </table>

JQuery:-

$('#DataTables_Table_0').DataTable({
 dom: 'Bfrtip',
    data: intsignl,
    columns: [
        {
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        { data: 'ScripName' },
        { data: 'BuySell' },
        { data: 'Qty' },
        { data: 'EntryPrice' },
        { data: 'Tgt' },
        { data: 'SL' },
        { data: 'LTP' },
        { data: 'TotPL' },
        { data: 'Investment' },
        { data: 'Period' },
        { data: 'EntryTime' },
        { data: 'MaxPL' },
        { data: 'aStatus' },
        { data: 'MaxPLPerReached' }
    ],
    "paging": true,
    "info": true,
    "language": {
        "emptyTable": "No data available"
    },
    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
        $("td:first", nRow).html(iDisplayIndex + 1);
        return nRow;
    },
});

data: intsignl in this intsignl I'm getting the Json data and returning that data as return JSON.parse(sus); so as per this image I'm getting the data Output image Getting this error:- Error message image

JSon Output format is :-

[{"ScripName":"BANKNIFTY23APRFUT","BuySell":"BUY","Qty":25,"EntryPrice":41872.75,"Tgt":42105.15,"SL":42027.7,"LTP":42105.15,"TotPL":5810.0,"Investment":154301.0,"Period":"Intraday","EntryTime":"2023-04-13 13:40:57","MaxPL":5810.0,"aStatus":"TGT Reached","MaxPLPerReached":100.0},{"ScripName":"NIFTY23APRFUT","BuySell":"SELL","Qty":50,"EntryPrice":17798.15,"Tgt":17749.15,"SL":17847.15,"LTP":17847.15,"TotPL":-2450.0,"Investment":105632.0,"Period":"Intraday","EntryTime":"2023-04-13 11:03:14","MaxPL":1157.5,"aStatus":"SL Reached","MaxPLPerReached":47.24},{"ScripName":"BANKNIFTY23APRFUT","BuySell":"SELL","Qty":25,"EntryPrice":41680.1,"Tgt":41595.25,"SL":41786.15,"LTP":41786.15,"TotPL":-2651.25,"Investment":153591.0,"Period":"Intraday","EntryTime":"2023-04-13 11:03:03","MaxPL":1107.5,"aStatus":"SL Reached","MaxPLPerReached":52.21}]

I'm returning json output as JSON.parse(sus); :-

{"ScripName": "BANKNIFTY23APRFUT",
"BuySell": "BUY",
"Qty": 25,
"EntryPrice": 41872.75,
"Tgt": 42105.15,
"SL": 42027.7,
"LTP": 42105.15,
"TotPL": 5810,
"Investment": 154301,
"Period": "Intraday",
"EntryTime": "2023-04-13 13:40:57",
"MaxPL": 5810,
"aStatus": "TGT Reached",
"MaxPLPerReached": 100
}

I have read this concept for understanding While I'm adding this data to datatable I'm getting cannot read properties of undefined (reading 'style') Please suggest me how to add dynamic data to datatable. Sorry for my bad English.

Answer 1

Hi @Ashok Kumar,

The data you obtained is json, and the data in the example you quoted is different. You need to write it differently. The "data" attribute for initializing your Data Table is expecting a list (Each element representing a row). https://datatables.net/forums/discussion/56116/loading-datatables-from-a-json-file You can refer to the code below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
    <script>
        $(document).ready(function () {
            var intsignl = [
                {
                    "ScripName": "BANKNIFTY23APRFUT",
                    "BuySell": "BUY",
                    "Qty": 25,
                    "EntryPrice": 41872.75,
                    "Tgt": 42105.15,
                    "SL": 42027.7,
                    "LTP": 42105.15,
                    "TotPL": 5810.0,
                    "Investment": 154301.0,
                    "Period": "Intraday",
                    "EntryTime": "2023-04-13 13:40:57",
                    "MaxPL": 5810.0,
                    "aStatus": "TGT Reached",
                    "MaxPLPerReached": 100.0
                },
                { "ScripName": "NIFTY23APRFUT", "BuySell": "SELL", "Qty": 50, "EntryPrice": 17798.15, "Tgt": 17749.15, "SL": 17847.15, "LTP": 17847.15, "TotPL": -2450.0, "Investment": 105632.0, "Period": "Intraday", "EntryTime": "2023-04-13 11:03:14", "MaxPL": 1157.5, "aStatus": "SL Reached", "MaxPLPerReached": 47.24 },
                { "ScripName": "BANKNIFTY23APRFUT", "BuySell": "SELL", "Qty": 25, "EntryPrice": 41680.1, "Tgt": 41595.25, "SL": 41786.15, "LTP": 41786.15, "TotPL": -2651.25, "Investment": 153591.0, "Period": "Intraday", "EntryTime": "2023-04-13 11:03:03", "MaxPL": 1107.5, "aStatus": "SL Reached", "MaxPLPerReached": 52.21 }]


            $('#DataTables_Table_0').DataTable({
                data: intsignl,
                columns: [
                    { data: 'ScripName' },
                    { data: 'BuySell' },
                    { data: 'Qty' },
                    { data: 'EntryPrice' },
                    { data: 'Tgt' },
                    { data: 'SL' },
                    { data: 'LTP' },
                    { data: 'TotPL' },
                    { data: 'Investment' },
                    { data: 'Period' },
                    { data: 'EntryTime' },
                    { data: 'MaxPL' },
                    { data: 'aStatus' },
                    { data: 'MaxPLPerReached' }
                ]

            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <table class="viewportcmntbl table responsive tdmaintbl dtr-inline dataTable" id="DataTables_Table_0">
            <thead>
                <tr class="rectblnobreakhead" role="row">
                    <th>Scrip Name</th>
                    <th>B/S</th>
                    <th>Qty</th>
                    <th>Entry Price (<i class="fa fa-inr"></i>)</th>
                    <th>Tgt</th>
                    <th>SL</th>
                    <th>LTP</th>
                    <th>TPL</th>
                    <th>Inv.</th>
                    <th>Period</th>
                    <th>Entry Time</th>
                    <th>Max PL</th>
                    <th>Max PL %</th>
                    <th>Status</th>
                </tr>
            </thead>
        </table>
    </form>
</body>
</html>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.