In table form controls buttons does not support Bootstrap4

carlop

Hi,
used configuration

bs4/jszip-2.5.0/dt-1.10.22/e-1.9.6/b-1.6.5/b-html5-1.6.5/fh-3.1.7/r-2.2.6/sl-1.3.1

I am using in form control according to the example
https://editor.datatables.net/examples/simple/inTableControls.html
The buttons in the form does not take the Bootstrap 4 style (see attachment) as only the generic "btn" class is used (see attachment).
Is it possible to force the Bootstrap4 style, apart adding manually all the CSS rules relevant to the Bootstrap buttons?
Thanks!

colin

Could you post your Editor code, please, so we can see how you're creating that button.

Colin

carlop

Thanks, please find the used code in the following.

var editor = new $.fn.dataTable.Editor({
        ajax: {
          create: {type: 'POST', url: 'admin_tags_editor.php?cmd=crea'},
          edit: {type: 'PUT', url: 'admin_tags_editor.php?cmd=mod&id=_id_'},
          remove: {type: 'DELETE', url: 'admin_tags_editor.php?cmd=eli&id=_id_'},
          // upload: { type: 'UPLOAD', url:  'admin_cows_editor.php?cmd=upl'}
        },
        table: '#iTagsTable',
        i18n: {
          "create": {
            "button": 'Aggiungi',
            "title":  "Crea nuova voce - * L'ASTERISCO INDICA UN CAMPO OBBLIGATORIO",
            "submit": "Crea"
          },
          /* "edit": {
            "button": '<i class="far fa-edit"></i>',
            "title":  "Modifica voce",
            "submit": "Aggiorna"
          },
          "remove": {
            "button": '<i class="far fa-trash-alt"></i>',
            "title":  "Elimina",
            "submit": "Elimina",
            "confirm": {
              "_": "Sicuro di voler eliminare %d riga?",
              "1": "Sicuro di voler eliminare 1 riga?"
            }
          }, */
          "error": {
            "system": "Si è verificato un errore. Riprova. Se il problema persiste, contatta l'assistenza."
          },
          "multi": {
            "title": "Valori multipli",
            "info": "Gli elementi selezionati contengono valori diversi per questo input. Per modificare e impostare tutti gli elementi per questo input sullo stesso valore, clicca qui, altrimenti manterranno i loro valori individuali.",
            "restore": "Annulla le modifiche",
            "noMulti": "Questo input può essere modificato individualmente, ma non come parte di un gruppo."
          },
          "datetime": {
            "previous": 'Precedente',
            "next":     'Successivo',
            "months":   [ 'Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ],
            "weekdays": [ 'dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab' ],
            "amPm":     ['am', 'pm'],
            "unknown":  '-'
          }
        },
        fields: [
          {
            "label": "* SERIALE:",
            "name": "code",
            "attr": {
              "placeholder": "Inserisci il codice"
            }
          },
          {
            "label": "* ID:",
            "name": "mac",
            "attr": {
              "placeholder": "Inserisci il mac"
            }
          },
          {
            "label": "* CODICE:",
            "name": "type",
            "type": "select2",
            // "separator": ',', comment, if multiple false
            "options": [
              { label: '', value: '' },
            //if multiple false, in order for the placeholder value to appear, you must have a blank <option> as the first option
            <?php
              $dati="";
              $items=$tra->getTagTypes();
                foreach ($items as $i) {
                  $dati.="{ value" . chr(58) . chr(34) . $i['code'] . chr(34) . ", label" . chr(58) . chr(34) . $i['description'] . chr(34) . "},";
                }
                  if ($dati!="") {
                    $dati=substr($dati,0,strlen($dati)-1);
                    echo $dati;
                  }
              ?>
            ],
            "opts": {
              "multiple": false,
              "allowClear": true, //comment if multiple true
              "minimumResultsForSearch": 8, //comment if multiple true
              "theme": "bootstrap4",
              "language": "it",
              "placeholder": "Seleziona un tipo"
            }
          },
          {
            "label": "* USO:",
            "name": "color",
            "type": "select2",
            // "separator": ',', comment, if multiple false
            "options": [
              { label: '', value: '' },
            //if multiple false, in order for the placeholder value to appear, you must have a blank <option> as the first option
            <?php
              $dati="";
              $items=$tra->getTagColors();
                foreach ($items as $i) {
                  $dati.="{ value" . chr(58) . chr(34) . $i['value1'] . chr(34) . ", label" . chr(58) . chr(34) . $i['value2'] . chr(34) . "},";
                }
                  if ($dati!="") {
                    $dati=substr($dati,0,strlen($dati)-1);
                    echo $dati;
                  }
              ?>
            ],
            "opts": {
              "multiple": false,
              "allowClear": true, //comment if multiple true
              "minimumResultsForSearch": 8, //comment if multiple true
              "theme": "bootstrap4",
              "language": "it",
              "placeholder": "Seleziona un uso"
            }
          },
          {
            "label": "ATTIVO:",
            "name": "active",
            "type": "checkbox",
            "def": "1",
            "separator": ",",
            "options": [
              { label: '', value: 1 }
            ]
          }
        ]
      });

      // Edit record
      $('#iTagsTable').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();
        editor.edit( $(this).closest('tr'), {
          title: 'Modifica voce',
          buttons: 'Aggiorna'
        });
      });

      // Delete a record
      $('#iTagsTable').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();
        editor.remove( $(this).closest('tr'), {
          title: 'Elimina',
          message: 'Sicuro di voler eliminare questa riga?',
          buttons: 'Elimina'
        });
      });

      var table = $('#iTagsTable').DataTable({
        dom:
          "<'row'<'col-sm-4'B><'col-sm-4'i><'col-sm-4'f>>" +
          "<'row'<'col-12'tr>>" +
          "<'row'<'col-sm-6'l><'col-sm-6'p>>",
        responsive: {details: {type: 'column'}},
        fixedHeader: true,
        "pagingType": "full_numbers",
        language: {
          url: "i18n/datatables-it.json"
          /* ,
          select: {
            rows: {
              _: "%d righe selezionate",
              1: "1 riga selezionata"
            }
          } */
        },
        select: false,
        buttons: [
          {extend: 'create', className: 'btn-primary', editor: editor},
          // {extend: 'edit', className: 'btn-primary', editor: editor},
          // {extend: 'remove', className: 'btn-primary', editor: editor},
          {extend: 'excel', title: null, text: 'Excel',
            exportOptions: {
              columns: [2, 3, 4, 5, 6, 7]
              /* ,
              modifier: {selected: null} */
            },
            className: 'd-none d-lg-inline-block btn-primary'
          }
        ],
        "ajax": {
          "url": "admin_tags_editor.php?cmd=list"
        },
        columns: [
          {"data": null, defaultContent: ''},
          {"data": "code","type": "num"},
          {"data": "mac"},
          { "data": { "_": "type", "display":"typeDisplay" }},
          { "data": { "_": "color", "display":"colorDisplay" }},
          {"data": "active"},
          {data: null, className: "center", defaultContent: '<a href="" class="editor_edit"><i class="far fa-edit"></i></a> / <a href="" class="editor_remove"><i class="far fa-trash-alt"></i></a>'
          }
        ],
          "initComplete":function( settings, json) {
            $("#iSpinner").fadeOut('slow');
            // $('[data-toggle="popover"]').popover();
          }
      });

colin

Thanks for that code. You would use className for the button to add the BS4 btn-primary class - see example here,

Colin

carlop

It works perfectly, thanks a lot.