Problems with editor 2.3.2

Gargiucn

Good morning,
I installed editor 2.3.2 with Datatables 2.0.4 via download builder as I normally do.
Unfortunately with editor 2.2.2 and 2.3.2 the buttons disappear and chrome displays a whole series of errors (see attached images).
What can I do?
Thank you,

Before upgrade:

After upgrade:

Chrome error messages:

colin

Those errors are coming from Bootstrap and FontAwesome, so odd that a DT upgrade generated them. Could you post your table initialisation code as well, please.

Colin

allan

Actually, could you link to a page showing the issue please, so I can debug it. If you can't link to your own page, you can use https://live.datatables.net or JSFiddle to create an example showing the problem.

Allan

Gargiucn

After a few checks no more errors appear in the browser.
I still don't see the buttons, though.
I can make the buttons appear by modifying the program as follows:

lengthChange: true,
lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Tutti"] ],  
language: {
   url: "plugins/italian.json"
 },
/**** original ****
initComplete: function () {  
    table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
}
/*
/**** modified ****/
layout: {
    topStart: {
        buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit', editor: editor },
        { extend: 'remove', editor: editor }
    ]
    }
},

but the lenghtMenu selector no longer appears...

Giuseppe

allan

Perhaps you could try:

layout: {
    topStart: {
        buttons: [
          'pageLength',
          { extend: 'create', editor: editor },
          { extend: 'edit', editor: editor },
          { extend: 'remove', editor: editor }
      ]
    }
}

However, I'd really need a link to a page showing the issue, as I requested above, to be able to debug what is going wrong.

Allan

Gargiucn

My debug code is: uriruq
Thanks,

Giuseppe

Gargiucn

Update.
I tried editing the page editor/examples/styling/bootstrap4.html in the editor examples.
Again, as it happens to me, I don't see the editor buttons if I replace "initcomplete" with "layout":

/*** original ***/
layout: {
    topStart: {
        buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit', editor: editor },
        { extend: 'remove', editor: editor }
    ]
    }
},
/*** modified ***/
lengthChange: true,
lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Tutti"] ],  
initComplete: function () {
    test a) table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );  
    test b) this.api().buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');
},  

If I use "layout" I no longer see the nice drop-down list for the number of rows to display and have to use the "ugly" 'pageLength' button in layout.

Thanks,
Giuseppe

kthorngren

Take a look at the layout docs. There are many layers you can use to layout the elements. In your screenshot it looks like the length change element is above the buttons. Use top2Start to place the length change above the buttons. Here is a test case:
https://live.datatables.net/guwafemu/494/edit

Is this what you are looking for?

If you are still having difficulties then update my test case to show the issues you are having. Your partial code snippets make it difficult to understand what you have and where the problem might be.

Kevin

Gargiucn

Hello,
I have no problem with "layout" except having to rewrite the css for my button customization.
I just find it strange that an update can lose compatibility with a previous version and force to edit all the .js files of my programs...

Have a nice day,
Giuseppe

allan

The issue was this:

 .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

With DataTables 2, the class names used for the Bootstrap 5 grid have changed. For example they use col-md-auto me-auto for a cell now.

The v2 upgrade was the ideal time to make some long over due changes, that would unfortunately break backwards compability like this. It was a long standing problem that you would need to inject buttons using a selector as use to be the way it was done.

The new layout option was designed to address exactly this. You can now control table control elements independently of the styling framework being used.

It is a pain, I reckognise that, but there was no option but to break some limited backwards compatability. I think I managed to keep that more or less limited to to use of external selectors and a few other legacy points.

Allan