Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  June 2023

  Are you able to give me a link to your page (or perhaps PM it to me if you can't make it public)? It sounds like the Bootstrap Javascript might not be getting loaded, but I'd need to be able to see the page to say for sure.

  Allan
• fcampbell Posts: 3Questions: 2Answers: 0

  June 2023

  Thank you for your quick response. I am sending you a PM now with the website and login info.
• larav Posts: 2Questions: 0Answers: 0

  August 2023

  Hi Allan I get this same error when I try to use Editor in Vue, please if you have answered it may you share it here?
• larav Posts: 2Questions: 0Answers: 0

  August 2023

  I also forgot to mention something,

  I do not use the datatables.net-vue component. I just started it from scratch and this is my arrangement of imports:

  <template>    
        <div class="card-block p-0" v-once>
               <table id="datatable" class="table table-striped">
  
                </table>
         </div>
  </template>
  
  import "datatables.net";
  import DataTable from "datatables.net-bs5";
  import "datatables.net-buttons";
  import "datatables.net-buttons-bs5";
  import "datatables.net-select-bs5";
  import "datatables.net-editor";
  import Editor from "datatables.net-editor-bs5";
  
  export default {
      name: "Index",
      data() {
          return {
              data: [
                  {
                      "DT_RowId": "row_1",
                      "id": 1,
                      "name":"Musa"
                  },
                  {
                      "DT_RowId": "row_2",
                      "id": 2,
                      "name": "Steven"
                  }
              ]
          }
      },
      mounted() {
          const editor = new Editor({
              data: this.data,
              table: "#datatable",
              fields: [
                  {
                      label: "ID",
                      name: "id"
                  },
                  {
                      label: "Name",
                      name: "name"
                  }
              ]
          });
  
          const table = new DataTable("#datatable", {
              columns: [
                  {
                      title: "ID",
                      data: "id"
                  },
                  {
                      title: "NAME",
                      data: "name"
                  }
              ],
              data: this.data,
              lengthChange: true,
              select: true,
          });
  
          new DataTable.Buttons(table, [
              {extend: "create", editor: editor},
              {extend: "edit", editor: editor},
              {extend: "remove", editor: editor}
          ]);
  
          let insertPoint = table.table().container().querySelectorAll('.col-md-6')[0];
          table.buttons().container().appendTo(insertPoint);
      }
  }
  </script>
  
  <style scoped>
  
  </style>
  
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2023

  As I mentioned in my previous reply in this thread, I'd need a link to a test case showing the issue please.

  Allan