Can't manually add a row to a Datatable

Can't manually add a row to a Datatable

AblitterAblitter Posts: 13Questions: 5Answers: 0
edited October 2020 in Free community support

I have a table and i want to manually add a row with his columns. But i cannot manage to do this. I get this error: DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}`

<table id="example" class="display dataTable" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Document</th>
                <th>Status</th>
                <th>Start Date</th>
                <th>End Data</th>
                <th>Result</th>
            </tr>
        </thead>
         <tbody>
            <tr>
                <td></td>
                <td>my doc</td>
                <td>waiting</td>
                <td>10-09-2018</td>
                <td>12-09-2019</td>                
                <td>OK</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th>Document</th>
                <th>Status</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Result</th>
            </tr>
        </tfoot>
    </table>

The table is initialized in this way in Document Ready function

                    $('#example').DataTable( {
                        sDom: 'lrtip',
                        columnDefs: [ {
                            "targets": 1,
                            "data": null,
                            "defaultContent": "<div style='display: inline-block;'><p>My doc</p></div><div style='display: inline-block; margin-left: 10px'><input style='width: auto; height: 10%;  font-size: 10px;' type='button' class='load' value='Load'/>"
                        }, {
                            "targets": 2,
                            "data": null,
                            "defaultContent": "<div style='display: inline-block;'><input style='width: auto; height: 10%;  font-size: 10px;  margin-left: 10px' type='button' class='exp' value='Export'/>"
                        } ],
                        
                    } );
                    

Now, i can i add manually a row column by column? I have a function where i receive Ajax data in json format. Please note that i want to have my row the same as initilized with the two button in each row

If i try this way i get an error: DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}`

 table.row.add( {
            "Document":       "my doc",
            "Status":   "ok",
            "Start Date":     "01/02/2020",
            "End Date": "2011/04/25",
            "Result":     "OK",
        } ).draw();                 

Please Help

Answers

  • allanallan Posts: 63,214Questions: 1Answers: 10,415 Site admin

    You haven't configured the DataTable to expect objects of data. So it will default to using arrays. You need to either use row.add() with an array of data, or add columns.data for your columns to tell it what property from the object to use for each column - see this example.

    Allan

  • AblitterAblitter Posts: 13Questions: 5Answers: 0

    Thank you very much for the reply. I solved the problem.

This discussion has been closed.