7 tables on the same page

Jacobairving

Hi, I have a page that's using the same data model for seven tables on the same razor-based html page. I'm doing the recommended initialization for the tables and the editor instances.

I'm using the latest version of DataTables and Editor. Has anyone tried this before?

Example:

const editor = new $.fn.dataTable.Editor({
  ajax: function,
    ...
    idSrc: 'SalesforceContactId',
    table: '#companyLeadership',
    display: 'envelope'
});

$('#companyLeadership').DataTable({
   buttons: [
     { extend: 'create', editor },
     { extend: 'edit', editor },
     { extend: 'remove', editor },
...
});

const editor2 = new $.fn.dataTable.Editor({
  ajax: function,
  ...
  idSrc: 'SalesforceContactId',
  table: '#corporateLeadership',
  display: 'envelope'});

$('#corporateLeadership').DataTable({
   buttons: [
     { extend: 'create', editor2 },
     { extend: 'edit', editor2 },
     { extend: 'remove', editor2 },
...});

When the page loads, all of the tables render correctly and the table using variable "editor" works. However, all of the other declared editor instances do not work. It appears there's an issue with the buttons. The page does not allow more than one instance of editor. Another strange issue is if I rename the first editor variable, editor1, and use that in the editor initialization, it breaks.

kthorngren

Looks like that should work. Here is an example with two Datatables.

However, all of the other declared editor instances do not work. It appears there's an issue with the buttons.

What is the issue? What happens? Have you looked at the browser's console for errors?

Another strange issue is if I rename the first editor variable, editor1, and use that in the editor initialization, it breaks.

What happens when it breaks?

Can you post a link to your page or test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rf1234

Your buttons look wrong:
The key word "editor" is missing.

buttons: [
     { extend: 'create', editor },
     { extend: 'edit', editor },
     { extend: 'remove', editor },

Don't know why your first editor works. Probably because it happens to be called "editor" ...

This is the correct syntax:

buttons: [
     { extend: 'create', editor: editor },
     { extend: 'edit', editor: editor },
     { extend: 'remove', editor: editor },

buttons: [
     { extend: 'create', editor: editor2 },
     { extend: 'edit', editor: editor2 },
     { extend: 'remove', editor: editor2 },

By the way you can also use multiple editors on one data table. Like in here:

buttons: [
    {   extend: "create", editor: contractEditor },
    {   extend: "edit",   editor: contractEditor },
    {   extend: "editDescription", editor: contractDescriptionEditor },
    {   extend: "editComments", editor: contractCommentsEditor },
    {   extend: "remove", editor: contractEditor },
    {   extend: "colvis", columns: ':not(.never)' }
]

kthorngren

Good catch @rf1234 I missed that

Kevin

Jacobairving

Thank you! That was it. There aren't many examples of multiple tables and I didn't realize that convention of leaving the editor setting alone explicitly sets the editor name to "editor". Again, thanks!!

kthorngren

The buttons settings is an array of Javascript objects. In the above case extend and editor are the keys. HTH.

Kevin

rf1234

Another thing that took me years to understand is how you can refer to the respective editor in custom buttons. Here is a link:
https://datatables.net/forums/discussion/79491/soft-edit#latest

In this "action" statement I an refer to the respective data table as "dt" because it is passed in. But I can also refer to the respective Editor as "editor" because of this:

{   extend: "duplicate", editor: yourEditor  },

Based on that I can reuse my custom button with various data tables and editors without having to change the code.