Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  April 28

  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 Posts: 63,530Questions: 1Answers: 10,474 Site admin

  April 29

  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 Posts: 109Questions: 30Answers: 0

  May 3

  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 Posts: 63,530Questions: 1Answers: 10,474 Site admin

  May 3

  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 Posts: 109Questions: 30Answers: 0

  May 4

  My debug code is: uriruq
  Thanks,

  Giuseppe
• Gargiucn Posts: 109Questions: 30Answers: 0

  May 4

  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 Posts: 21,343Questions: 26Answers: 4,954

  May 4

  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 Posts: 109Questions: 30Answers: 0

  May 6

  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 Posts: 63,530Questions: 1Answers: 10,474 Site admin

  May 6 Answer ✓

  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