Error populating existing table with new data

arcanisgk

Link to test case:
https://codepen.io/arcanisgk-the-sasster/pen/ZYzJqwG

Debugger code (debug.datatables.net):
Error messages shown:

DataTables warning: table id=translations-table - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see https://datatables.net/tn/4

Description of problem:

Hi, I'm back to my last stage of development related to datatables, in this case, as I do it in the test case, I'm trying to populate an existing datatable from a single script or method, that's why you can see that I'm trying to populate the table from a single static call to initialization and I'm not implementing Ajax.

In this case the problem has to do with the message, I am trying to clean the table in case it has previous data, and then I am trying to add new data, as well as make column adjustments if necessary... the problem is that the rows are added, but they do not have any data. As you can see I have created a Json/object structure that simulates the data.

arcanisgk

The only thing I can think of is that I need to define the columns, in the initialization, so that in the update, you recognize where each piece of data should go... but I simply don't understand the error that appears... assuming that my json/object structure is correct.

arcanisgk

I have tried to change the "updateTable" script
- clone the current configuration.
- destroy the table.
- initialize it with the cloned data and configuration.

and with this new version the error disappears: but the configuration is not maintained, nor is the data displayed...

https://codepen.io/arcanisgk-the-sasster/pen/QwLMJdw

kthorngren

Requested unknown parameter '0' for row 0, column 0.

The first test case is adding an array of objects. You haven't defined the columns with columns.data so Datatables expects the row data to be an array not an object. See the Data Source types doc for more information.

I have tried to change the "updateTable" script

You are trying to use jsonContent.data but jsonContent does not have a data object:

target.DataTable({
            ...currentConfig.oInit,
            data: jsonContent.data
        });

But jsonContent does contain the row data. Change to this:

target.DataTable({
            ...currentConfig.oInit,
            data: jsonContent
        });

You will also need to define columns.data.

Kevin

arcanisgk

@kthorngren Do you think it's advisable to reinitialize the table instead of updating the content and adding support for the "data" attribute/parameter to the "init()" method???

I say this because this should actually be completely dynamic, having to define the columns means I have to create something that generates the column names from the initial html or some parameter... if I destroy the table and initialize it with default data passed through an array, I think I could avoid the situation...

kthorngren

You only need to destroy the Datatable if the configuration is changing. For example changing the number of columns. Otherwise you can add and remove rows as you wish. Use APIs like rows.add(), row().remove(), clear(), etc to update the rows.

Keep in mind that using using objects is typically easier in Javascript than arrays. Lets say you want to swap two columns. They are swapped with rearranging columns.data when using objects. Since objects are accessed using the key name the remaining Javascript code doesn't need changed. But with arrays you will need to update the array indexes throughout your code. Also its more obvious what object is being accessed versus an array index.

Kevin

arcanisgk

@kthorngren Is there any data attribute that is assigned to the html th tags and the plugin sees or registers them as column names?

example:

<tr>
    <th data-column-name="row"></th>
    <th data-column-name="key">{{key-column}}</th>
    <th data-column-name="status">{{status}}</th>
    <th data-column-name="priority">{{priority}}</th>
    <th data-column-name="btn-translate">{{translate}}</th>
    <th data-column-name="btn-report">{{report}}</th>
</tr>

arcanisgk

Well, while still waiting for your response, I have implemented a palliative... I don't like it... but it is what it is...

It should be noted that this answer creates a dependency, and it would be to establish the column names in a specific data attribute to be parsed programmatically in the table configuration handler, combining some HTML and JavaScript:

html:

<tr>
    <th data-column-name="row"></th>
    <th data-column-name="key">{{key-column}}</th>
    <th data-column-name="status">{{status}}</th>
    <th data-column-name="priority">{{priority}}</th>
    <th data-column-name="btn-translate">{{translate}}</th>
    <th data-column-name="btn-report">{{report}}</th>
</tr>

javascript:

columns: config.columns.map(column => ({
                    data: column.data,
                    name: column.name,
                    render: function (data, type, row) {
                        return data || '';
                    }
                })),

complete code:

https://codepen.io/arcanisgk-the-sasster/pen/NPKabzO

Wala ...

kthorngren

Take a look at the HTML5 data attributes for config options doc. Possibly you can do something like this:

<tr>
    <th data-name="row"></th>
    <th data-name="key">{{key-column}}</th>
    <th data-name="status">{{status}}</th>
    <th data-name="priority">{{priority}}</th>
    <th data-name="btn-translate">{{translate}}</th>
    <th data-name="btn-report">{{report}}</th>
</tr>

You could do something similar for the columns.data.

                    render: function (data, type, row) {
                        return data || '';
                    }

Instead of columns.render to return an empty string of the data doesn't exist you could use columns.defaultContent.

Kevin

arcanisgk

@kthorngren Thanks for answering, from what I have been able to study and read, they do not have anything functional similar...

kthorngren

they do not have anything functional similar...

I don't understand what you mean. Here is an example:
https://live.datatables.net/socirone/33/edit

        <thead>
          <tr>
            <th data-name="Name" data-data="name">Name</th>
            <th data-name="Position" data-data="position">Position</th>
            <th data-name="Office" data-data="office1">Office</th>
            <th data-name="Extn" data-data="extn">Extn.</th>
            <th data-name="Start date" data-data="start_date">Start date</th>
            <th data-name="Salary" data-data="salary">Salary</th>
          </tr>
        </thead>

data-name sets the columns.name and data-data sets columns.data.

These console log statements show it works:

  console.log( table.column( 'Position:name').title() );
  console.log( table.row(2).data() );

The first uses the column-selector of {string}:name to output the column().title() header title.

The second uses row().data() to output the row object.

Position
{id: '3', name: 'Ashton Cox', position: 'Junior Technical Author', salary: '$86,000', start_date: '2009/01/12', …}

EDIT:: The office column I defined columns.data as office1 which does not exist. columns.defaultContent will be used since the data object doesn't exist.

Are you looking for something different? If the above doesn't help then please provide more details about the issues you are trying to solve.

Kevin

arcanisgk

Are you looking for something different?

No, but now you present it in a better way, and I think I had not seen/understood it that way.

thank you so much.