Remove button message Bootstrap5 not showing correctly.

Remove button message Bootstrap5 not showing correctly.

jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0

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

  • jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0
    edited April 24

    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();
        }
      });
    
  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Answer ✓

    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

  • jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0

    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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

Sign In or Register to comment.