Remove button message Bootstrap5 not showing correctly.

jmccolgan93

i was trying to add a delete button using this example here and when you set the styling to Bootstrap5 it shows a message in the bottom left of the screen and not in a model. i am getting the same behavior on my stuff as well.

jmccolgan93

you can ignore this... i had to clear my browser cache and it fixed itself.

jmccolgan93

actually I'm back.... so i cant get the delete dialog box to show the bootstrap formatting. it will only show the default edit style.

I'm loading these and confirmed they are returning an 200 status code.

https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css
https://cdn.datatables.net/buttons/3.0.1/css/buttons.bootstrap5.css
https://cdn.datatables.net/select/2.0.0/css/select.bootstrap5.css
https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css
https://cdn.datatables.net/rowreorder/1.5.0/css/rowReorder.bootstrap5.css
.../datatables/css/editor.dataTables.css
.../datatables/css/editor.bootstrap5.css

here is my config in case you need that...

  editor = new DataTable.Editor({
    ajax: {
      url: `/migtrack/eqlist/data/${$(".currentlist").text()}`,
      contentType: 'application/json',
      data: function (d) {
        return JSON.stringify(d);
      },
      success: function (json) {
      },
    },
    fields: [
      { data: "amount", name: "amount" },
      { data: "type", name: "type" },
      { data: "DT_RowId", name: "DT_RowId" },
      {
        name: "barcodes",
        type: "select2",
        options: [
          { label: "1 (highest)", value: "1" },
          { label: "2", value: "2" },
          { label: "3", value: "3" },
          { label: "4", value: "4" },
          { label: "5 (lowest)", value: "5" },
        ],
      },
    ],
    table: "#winnernames",
  });

  editor.add( {
    label: "State:",
    name: "state",
    type: "select2",
    opts: {
        "placeholder": "Select State",
        "allowClear": true
    }
 } );

  var dt_fixedheader = dt_period_table.DataTable({
    ajax: "/migtrack/eqlist/data/" + $(".currentlist").text(),
    columns: [
      {
        data: null,
        orderable: false,
        render: DataTable.render.select(),
      },
      { data: "amount", orderable: false, className: "" },
      { data: "type", orderable: true, className: "", 
      render: function (data, type, full, meta) {
        return full["typeformatted"];
      }, },
      { data: "available", orderable: false, className: "" },
      { data: "checkedout", orderable: false, className: "" },
      { data: "checkedin", orderable: false, className: "" },
      {
        data: "barcodes",
        orderable: false,
        className: "",
        render: function (data, type, full, meta) {
          return full["barcodes"].length;
        },
      },
      { data: "casecode", orderable: true, className: "" },
      { data: "notes", orderable: false, className: "" },
      { data: "sortorder", orderable: false, className: "" },
    ],
    columnDefs: [
      {
        target: [-1, -2],
        visible: false,
      },
    ],
    dom: '<"container-fluid px-0"<"row"<"col"B><"col"l><"col"f>>>rtip',
    order: [[9, "asc"]],
    info: false,
    ordering: true,
    paging: false,
    Processing: true,
    displayLength: -1,        
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    lengthMenu: [
      [10, 25, 50, -1],
      [10, 25, 50, "All"],
    ],
    responsive: true,
    buttons: [
      {
        extend: "createInline",
        text: 'Add',
        className: 'create-new mb-2 btn btn-primary',
        editor: editor,
        formOptions: {
            submitTrigger: 0,
            submitHtml: '<button type="button" class="btn btn-icon btn-label-info btn-sm add-row"><span class=""><i class="fa-solid fa-plus"></i></span></button>'
        }
    },
    {
        text: 'Return',
        editor: editor,
        className: 'mb-2 btn btn-primary',
        formMessage: function (e, dt) {
            var rows = dt
                .rows(e.modifier())
                .data()
                .pluck('type');
            return (
                'Are you sure you want to delete the entries for the ' +
                'following record(s)? <ul><li>' +
                rows.join('</li><li>') +
                '</li></ul>'
            );
        }
    },
    {
        text: 'Send Out',
        editor: editor,
        className: 'mb-2 btn btn-primary',
        formMessage: function (e, dt) {
            var rows = dt
                .rows(e.modifier())
                .data()
                .pluck('type');
            return (
                'Are you sure you want to delete the entries for the ' +
                'following record(s)? <ul><li>' +
                rows.join('</li><li>') +
                '</li></ul>'
            );
        }
    },
    {
        extend: 'remove',
        editor: editor,
        className: 'mb-2 btn-danger',
        formMessage: function (e, dt) {
            var rows = dt
                .rows(e.modifier())
                .data()
                .pluck('typeformatted');
            return (
                'Are you sure you want to delete the entries for the ' +
                'following record(s)? <ul><li>' +
                rows.join('</li><li>') +
                '</li></ul>'
            );
        }
    }
    ],
    createdRow: function (row, data, dataIndex) {
      if (data.compsitetype > 0) {
        $(row).addClass("bg-label-warning");
      }
      if (data.available < 0) {
        $(row).addClass("text-danger");
      }
    },
    drawCallback: function () {
      $(".dt-select2").select2();
    }
  });

allan

Have you loaded the editor.bootstrap5.js file?

If so, and you are still having a problem, can you give me a link to the page so I can take a look please? You can PM me the link if you can't make it public.

Allan

jmccolgan93

thanks allen that worked. after i loaded that I was still having some styling issues. i then had to remove the ".../datatables/css/editor.dataTables.css" line and it seems to be working correctly now.

allan

Yes, the two can conflict. Thedownload builder is the best way to make sure rot have the files you need, and only those files.

Allan