How to populate data from json format into data table and keep datatable properties

I have been able to get data into data table from json format via ajax,But suddenly data table lost some properties that enable it to search and allow pagination on page. But the results can be viewed as an array via console.log, And all data are coming as a result on long table, But on document.ready function the table before i change the control appears well with all the functionalities

1- I tried to polulate it via js using by declaring and enable the properties as follow:

 $('#assets').DataTable({
        paging: true,
        scrollX: true,
        lengthChange : true,
        searching: true,
        ordering: true
      });

and Showing 0 to 0 of 0 entries (filtered from 1 total entries)

2- Alternatively

.done( function(data) {
    $('#example').dataTable( {
        "aaData": data,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "detail_alias" },
            { "data": "points" }
        ]
    })
})

I tried different method from different sources and red datatable resouces but didn't work. I googled for long without getting an answer

Solution

I have used the online dummy product URL for the purpose of data fetching. Update your code accordingly.

You need the adjust your data table accordingly:

$(document).ready(function() {
        var table = $('#assets').DataTable({
         paging: true,
            scrollX: true,
            lengthChange: true,
            searching: true,
            ordering: true,
            columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'detail_alias' },
                { data: 'points' }
            ]
        });

Furthermore, if your data returns from the backend API accordingly to the data table format feel free to remove the formatting code:

   var formattedData = data.products.map(function(product) {
                    return {
                        id: product.id,
                        name: product.title,
                        detail_alias: product.title,
                        points: product.price
                    };
                });

Refer the code below for more reference:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataTable with JSON Data</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
</head>
<body>
    <table id="assets" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Detail Alias</th>
                <th>Points</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
    $(document).ready(function() {
        var table = $('#assets').DataTable({
         paging: true,
            scrollX: true,
            lengthChange: true,
            searching: true,
            ordering: true,
            columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'detail_alias' },
                { data: 'points' }
            ]
        });

        $.ajax({
            url: 'https://dummyjson.com/products',  // Replace with original url
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                var formattedData = data.products.map(function(product) { // Not needed if data receive from backend is in format accordingly
                    return {
                        id: product.id,
                        name: product.title,
                        detail_alias: product.title,
                        points: product.price
                    };
                });
                table.clear();
                table.rows.add(formattedData);
                table.draw();
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', {
                    status: status,
                    error: error,
                    responseText: xhr.responseText
                });
                alert('An error occurred while loading data. Please check the console for details.');
            }
        });
    });
    </script>
</body>
</html>