Editor Noob: Pass selected table row values to Editor

a1730 · March 17

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 · March 17

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 · March 17

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

allan · March 17

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

Allan

a1730 · March 17

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 · March 18

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 · March 18

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 · March 18

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 · March 18

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.

Editor Noob: Pass selected table row values to Editor

Editor Noob: Pass selected table row values to Editor

Answers

Howdy, Stranger!

Categories

DataTables

Editor Noob: Pass selected table row values to Editor

Editor Noob: Pass selected table row values to Editor

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables