Editor Noob: Pass selected table row values to Editor

a1730

Error messages shown:
No errors reported
Description of problem:
I have a very simple dataTable with seven rows. I know, I am learning the API...
The input data is from JS array of [name:string, label:string, id:number]. DataTables does its part and draws the table - no issues.

Now, I added editor and a event handler into the mix.

   dTable.on('click', 'tbody td:not(:first-child)', function (e) {
    editor.bubble(this, [0,1,2], {
     title: 'My fangled Title',
     submit: 'all'
    });
   })

A beautiful Editor bubble shows up when I click on a row but there is no data. It is treated as if new.
I passed [0,1,2] trying to help Editor resolve the source of data... No cigar:(
How do I tell Editor to use the selected row as data source?

allan

this should do it. From the the bubble Editor will be able to resolve the row in question.

Can you either link to a page showing the issue, or show me that data you are loading into the table and the JavaScript initialisation for both Editor and DataTable.

Thanks,
Allan

a1730

Hi Allan,
I've attempted to create an example https://live.datatables.net/sisekago/2/edit. Now, I heve to learn jsbin

allan

Can you show me what your Ajax request to populate the table returns please?

Allan

a1730

Hi Allan,
The response is in the example but reproduced here:

[
["ACE","Ace Hardware",1],
["APP","application",23],
["ARISTAX","AristaX",437801],
["DEMO","demo site",523],
["DLTR","DOLLAR TREE, INC.",6441],
["HEB","Hilly Billy",7956],
["HRB","H&R Block Group Inc.",516559],
["ONE","One Love",42301],
["PCH","Golub Capital BDC Inc.",939],
["SEG","South Eastern Grocers", 231],
["SHAW","Shaws Back office",2717],
["SYS","System",237],
["TEST","TEST site",143281]
]

I hope this helps.

allan

And which array entry is the primary key value in your database? You are using idSrc: 1 in your Editor initialisation. It should work, but I would say it was unusual since that is an editable field. It is rare indeed for the primary key to be editable.

You might want to add rowId: 1 to the DataTable.

The reason the data isn't showing up for editing is the field configuration:

    fields: [
     {label: 'Company Code:', name: 'tenant'},
     {label: 'Company Name:', name: 'name'},
     {label: 'DUNS Number:', name: 'duns'}
    ],

That is telling Editor to look for data in a JSON object with the property names tenant, name and duns.

You don't have a JSON object for each row, so it will fail. You could use name: 0, name: 1, and name: 2.

However, I'd suggest you consider using objects rather than arrays for the source data. It is generally easier to work with.

Allan

a1730

Thanks Allan for your feedback.

Using objects is indeed simpler but I am trying to learn and understand DataTables properly, meaning that I want to feel comfortable using arrays or objects as data sources. For instance, how does one get array data to show up in jsbin? I don't know because I do not know where to look:(! I am sure you noticed this in the sample that I posted ...

Also, we have some large tables that will be used later in the project. We do not wish to send objects for those tables unless absolutely necessary.

allan

For instance, how does one get array data to show up in jsbin?

https://live.datatables.net/sisekago/5/edit

Don't use ajax since you aren't making an Ajax request.

Allan

a1730

Wow!
Thank you. Thank you. Thank you. Thank you. Allan.
I now have a working example to play with.
It all makes sense looking at your code.
I really appreciate the time that you spent on this support.
I can't thank you enough.