Fill datatable with ajax and restController

maha77

Hi,
I'm new to datatable and have to make a project with it. I'd like to call a RestController who returns a json and populate my table with it. I tried many things and got different message. For now I'm stuck with the following.
I googled a while for the messages but don't find the solution

jquery-3.6.0.min.js:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'nTh')

Here is what i get from RestController:

[
    {
        "product_id": 2,
        "name": "Soße",
        "company": "Maggi",
        "units": 30,
        "price": 12.99,
        "enabled": true
    },
    {
        "product_id": 3,
        "name": "Soße",
        "company": "öldsj",
        "units": 20,
        "price": 1.99,
        "enabled": true
    }
]

my table:

<table id="table_id" class="display">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Company</th>
                        <th>Unit</th>
                        <th>Price</th>
                        <th>Action1</th>
                        <th>Action2</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Salt</td>
                        <td>Berchtesgadener</td>
                        <td>100</td>
                        <td>2,99</td>
                        <td>gf</td>
                        <td>fd</td>
                    </tr>
                </tbody>
            </table>

my table in js:

$(document).ready(function() {
let table = $('#table_id').DataTable(
   // let table = new DataTable('#table_id') {
    {
 "ajax": {
                    "url": "getProducts",
                    "type": "GET",
                    contentType: "application/json",
                    dataSrc: ''

                  },

    "columns": [
             {
               data: "product_id",
               data: "name",
               data: "company",
               data: "units",
               data:"price",
               data: "enabled"
             }
           ],


    dom: 'Bfrtip',
    buttons: [
    {
        text: 'My button',
        className: 'custom-html-collection',
        action: function ( e, dt, node, config ) {
        alert( 'Button activated' );
        }
    }
    ],
    "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Delete</button>"
    },
    {
        "targets": -2,
        "data": null,
        "defaultContent": "<input type='checkbox' checked data-toggle='toggle'>Enable</input>"
    }
    ]

    } );
 
    $('#table_id tbody').on( 'click', 'button', function () {
        table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
    } );

    $('#addRow').on('click', function(){
        let product = document.getElementById("product").value;
        let company = document.getElementById("company").value;
        let units = document.getElementById("units").value;
        let price = document.getElementById("price").value;
    
        table.row.add([product,company, units, price]).draw();
    });
} );

I don't no how to finish in time. First I want to download my data and populate the table. "enabled" should be matched to the toggle. I tried it without this 2 actions and just populate 6 columns but nothing works. Googling didn't help.

Any help is appreciated
Thanks
Markus

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

I'm not too clear on your issue, but your table has a few problems by the looks of it.

First, you've got data in the DOM, and then you're requesting data over ajax too - normally you would have one of the other.

Second, your HTML has fields in the order : "Name", "Company", etc. But when you define the columns in columns, the order is product_id, name, company, so the HTML doesn't appear to match the initialisation.

Third, you're mixing columns and columnDefs, move the latter into the former. I suspect you want 8 columns in your table, the six elements in your object, then the additional two, but you need to reflect that in the HTML and have 8 th elements there too. This example here should help, as it's adding buttons into a table.

Colin

maha77

Hi Colin,
thanks a lot. I also found some erros on tried things on my own. I had to to adjust the number of colums, that's true. "move the latter into the former" was the correct hint.

My JS looks now like this:

"columns": [
                  {'data': 'product_id',
                  "defaultContent": null,
                  "visible": false},
                  {'data': 'name'},
                  {'data': 'company'},
                  {'data': 'units'},
                  {'data': 'price'},
                  {'data': 'enabled',
                  "defaultContent": true,
                  "visible": false,},
                  {
                  "targets": [-2],
                  "data": null,
                  "defaultContent": "<input type='checkbox' checked data-toggle='toggle'>Enabled/input>"
                  },
                  {
                   "targets": [-1],
                   "data": null,
                   "defaultContent": "<button>Add to Cart</button>"
                   }
                ]

And it shows what I want. Now I can continue to implement some functionality.
Thanks,
Markus