Answers

• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  August 2023 Answer ✓

  Hi,

  Have you seen this example which, while it doesn't show Editor, it does how the Vue component we publish for DataTables and use of extensions such as Buttons.

  Using Editor in Vue would be done in exactly the same way. npm install Editor and then import it and use it in the same way as the examples on this site - e.g.:

  import DataTable from 'datatables.net-vue3';
  import DataTablesCore from 'datatables.net';
  import 'datatables.net-buttons';
  import 'datatables.net-buttons/js/buttons.html5';
  import 'datatables.net-responsive';
  import 'datatables.net-select';
  import '@datatables.net/editor-dt';
  
  DataTable.use(DataTablesCore);
  
  const editor = new DataTable.Editor({
      ajax: '../php/staff.php',
      fields: [
          {
              label: 'First name:',
              name: 'first_name'
          },
          // ...
      ],
      table: '#example'
  });
   
  new DataTable('#example', {
      ajax: '../php/staff.php',
      buttons: [
          { extend: 'create', editor },
          { extend: 'edit', editor },
          { extend: 'remove', editor }
      ],
      columns: [
          { data: 'first_name' },
         // ...
      ],
      dom: 'Bfrtip',
      select: true
  });
  

  Let me know how you get on with it.

  I'll look at adding an example on our site for that.

  Regards,
  Allan
• chita Posts: 33Questions: 12Answers: 2

  August 2023 edited August 2023

  I set up the code as above and installed editor, but the error TypeError: DataTable.Editor is not a constructor appears in the Web Administrator tool. Is there an example of actually using editor to add features to the data table?
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  August 2023

  There isn't an example of Vue with Editor yet. As I noted I need to look into doing that.

  Try:

  import Editor from '@datatables.net/editor-dt';
  

  then

  const editor = new Editor( ... );
  

  Editor should attach itself to the DataTable object so I'm not sure what is going wrong there, but it will return itself, so my suggestion here should do the job.

  From your other thread it sounds like you want to make changes to the table's data without an Ajax submit. Is that correct? If so, have a look at this example which shows how to do that (not Vue based, but the key is simply that the ajax option isn't given - that would apply for using it in Vue as well).

  Allan
• chita Posts: 33Questions: 12Answers: 2

  August 2023 edited August 2023

  <script setup>
      import DataTable from 'datatables.net-vue3';
      import DataTablesCore from 'datatables.net';
      import Editor from '@datatables.net/editor-2023-09-13-dt';
      import 'datatables.net-buttons';
      import 'datatables.net-buttons/js/buttons.html5';
      import 'datatables.net-responsive';
      import 'datatables.net-select';
      import 'datatables.net-datetime';
       
      DataTable.use(DataTablesCore);
      
      const editor = new DataTable.Editor({
          fields: [
              {
                  label: 'First name:',
                  name: 'first_name'
              },
              // ...
          ],
          table: '#example'
      });
      
      const tables = new DataTable('#example', {
          buttons: [
              { extend: 'create', editor },
              { extend: 'edit', editor },
              { extend: 'remove', editor }
          ],
          columns: [
            {
              data: null,
              render: data => data.first_name + ' ' + data.last_name
            },
            { data: 'position' },
            { data: 'office' },
            { data: 'extn' },
            { data: 'start_date' },
            { data: 'salary' }
          ],
          dom: 'Bfrtip',
          select: true
      });
  </script>
  

  The above-mentioned error continues to occur. The current <script> situation. What's the problem?
• chita Posts: 33Questions: 12Answers: 2

  August 2023

  Is the above code not available in the .vue file?
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  August 2023 Answer ✓

  If you change:

  const editor = new DataTable.Editor({
  

  to:

  const editor = new Editor({
  

  I think that should address it.

  Allan
• chita Posts: 33Questions: 12Answers: 2

  August 2023

  The existing error is gone, but a new error called Uncaught (inpromise) TypeError: DataTable is not a constructor...
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  August 2023 Answer ✓

  Doh - I was forgetting how the Vue component works. You use the <DataTable> component in the template, not as a constructor. Try this:

  <script setup>
  import DataTable from 'datatables.net-vue3';
  import DataTablesCore from 'datatables.net';
  import Editor from '@datatables.net/editor-2023-09-13-dt';
  import 'datatables.net-buttons';
  import 'datatables.net-buttons/js/buttons.html5';
  import 'datatables.net-responsive';
  import 'datatables.net-select';
   
  DataTable.use(DataTablesCore);
   
  const editor = new Editor({
      ajax: '../php/staff.php',
      fields: [
          {
              label: 'First name:',
              name: 'first_name'
          },
          // ...
      ],
      table: '#example'
  });
  
  const columns = [
    { data: 'name', title: 'Name' },
    // ...
  ];
  
  const options = {
    responsive: true,
    dom: 'Bfrtip',
    select: true,
    buttons: [
      { extend: 'create', editor },
      { extend: 'edit', editor },
      { extend: 'remove', editor }
    ],
  };
  </script>
  
  <template>
      <DataTable
          :columns="columns"
          :options="options"
          ajax="/php/staff.php'"
          class="display"
      />
  </template>
  

  Allan
• chita Posts: 33Questions: 12Answers: 2

  August 2023 edited August 2023

  Wow! The table is showing normally using the above code! Thank you so much!! Excuse me, but may I ask you one more question? How do I use the inline editing function in the code above? I'm explaining it in that example, but I don't know how to add it.
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  August 2023

  You need a reference to the DataTables API instance for the table. you can get that as described in the manual here. There is an example linked there too.

  Then, use

  table.on('click', 'tbody td:not(:first-child)', function (e) {
      editor.inline(this);
  });
  

  where table is the API reference.

  Allan
• chita Posts: 33Questions: 12Answers: 2

  September 2023

  The current state of <script> is like this, and this will result in the error Uncaught (in prompt) TypeError: table.on is not a function.

  <script setup>
  import { onMounted, ref } from 'vue';
  import DataTable from 'datatables.net-vue3';
  import DataTablesCore from 'datatables.net';
  import Editor from '@datatables.net/editor-2023-09-13-dt';
  import 'datatables.net-buttons';
  import 'datatables.net-buttons/js/buttons.html5';
  import 'datatables.net-responsive';
  import 'datatables.net-select';
  import 'datatables.net-datetime';
  import 'datatables.net-colreorder';
        
  DataTable.use(DataTablesCore);
  
  let dt;
  const table = ref();
  
  onMounted(function () {
    dt = table.value.dt;
  });
       
  const editor = new Editor ({
    fields: [
      { label: 'Name:', name: 'name' },
      { label: 'Id', name: 'id' },
    ],
    idSrc: 'id',
    table: '#example'
  });
       
  const columns = [
    { data: 'checkbox', title: '', className: 'select-checkbox', orderable: false },
    { data: 'name', title: 'Name' },
    { data: 'id', title: 'Id' },
  ];
  
  const options = {
    responsive: true,
    orderMulti: false,
    order: [[1, 'asc']],
    dom: 'Bfrtip',
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    buttons: [
      { extend: 'create', editor },
      { extend: 'edit', editor },
      { extend: 'remove', editor }
    ],
    colReorder: true,
  };
  
  const data = [
    {
      checkbox: '',
      name: 'pjh',
      id: 'chita',
    },
    {
      checkbox: '',
      name: 'pjh2',
      id: 'chita2',
    }
  ];
  
  table.on('click', 'tbody td:not(:first-child)', function(e) {
    editor.inline(this);
  });
  </script>
  
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2023 Answer ✓

  With that code you DataTable API instance is the variable dt:

  onMounted(function () {
    dt = table.value.dt;
  });
  

  You would use dt.on(...).

  This example shows the API being used.

  Allan