7 tables on the same page

7 tables on the same page

JacobairvingJacobairving Posts: 2Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    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

  • rf1234rf1234 Posts: 2,950Questions: 87Answers: 416
    Answer ✓

    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)' }
    ]
    
  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    Good catch @rf1234 I missed that :smile:

    Kevin

  • JacobairvingJacobairving Posts: 2Questions: 1Answers: 0

    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!!

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

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

    Kevin

  • rf1234rf1234 Posts: 2,950Questions: 87Answers: 416

    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.

Sign In or Register to comment.