Editor not working

kos406

I use magento 2. I try to connect datatablesEditor.

file requirejs-config.js :

var config = {
  deps: [
    "js/jquery.dataTables.min",
    "js/dataTables.editor.min",
  ],
  paths: {
    "datatables.net": "js/jquery.dataTables.min",
  },
};

file .phtml:

<script>
  require([
    'jquery',
    'js/jquery.dataTables.min',
    'js/dataTables.editor.min',
  ], function ($) {
    $(document).ready(function () {
      var editor;
      
      var testdata = {
        "data": <?=$block->getItems()?>
      };

      editor = new $.fn.dataTable.Editor( {
        data: testdata.data,
        table: '#table-upload',
        fields: [
          { label: 'reference',  name: 'reference'  },
          { label: 'product_title',  name: 'product_title'  },
          { label: 'shape',  name: 'shape'  },
          { label: 'colour',  name: 'colour'  },
          { label: 'clarity',  name: 'clarity'  },
          { label: 'cut',  name: 'cut'  },
          { label: 'carat',  name: 'carat'  },
          { label: 'price',  name: 'price'  },
        ],
        select: true,
        buttons: [
          { extend: 'create', editor: editor },
          { extend: 'edit',   editor: editor },
          { extend: 'remove', editor: editor }
        ]
      } );
      $('#table-upload').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
      } );

      function format(d) {
        return '<table class="child-table">' +
            '<tr>' +
            '<td class="name-attr">Reference</td>' +
            '<td>' + d.reference + '</td>' +
            '<td class="name-attr">Shape</td>' +
            '<td>' + d.shape + '</td>' +
            '<td class="name-attr">Carats</td>' +
            '<td>' + d.carat + '</td>' +
            '<td class="name-attr">Price/CT</td>' +
            '<td>' + d.rap_price + '</td>' +
            '<td class="name-attr">ASK,%</td>' +
            '<td>' + d.stone_rapnet_discount_pct + '</td>' +
            '<td class="name-attr">Total</td>' +
            '<td>' + d.total + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td class="name-attr">Color</td>' +
            '<td>' + d.color + '</td>' +
            '<td class="name-attr">Clarity</td>' +
            '<td>' + d.clarity + '</td>' +
            '<td class="name-attr">Lab</td>' +
            '<td>' + d.lab + '</td>' +
            '<td class="name-attr">PRO/CUT</td>' +
            '<td>' + d.pro_cut + '</td>' +
            '<td class="name-attr">Fin/Pol</td>' +
            '<td>' + d.fin_pol + '</td>' +
            '<td class="name-attr">Symmetry</td>' +
            '<td>' + d.symmetry + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td class="name-attr">Flu</td>' +
            '<td>' + d.flu + '</td>' +
            '<td class="name-attr">Table</td>' +
            '<td>' + d.table_pct + '</td>' +
            '<td class="name-attr">Crown</td>' +
            '<td>' + d.crown_depth + '</td>' +
            '<td class="name-attr">Pavilion</td>' +
            '<td>' + d.pavilion + '</td>' +
            '<td class="name-attr">Total Depth</td>' +
            '<td>' + d.total_depth + '</td>' +
            '<td class="name-attr">Crown Angle</td>' +
            '<td>' + d.crown_angle + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td class="name-attr">Pavilion angle</td>' +
            '<td>' + d.pavilion_angle + '</td>' +
            '<td class="name-attr">Girdle</td>' +
            '<td>' + d.girdle_thin + '</td>' +
            '<td class="name-attr">Culet</td>' +
            '<td>' + d.culet + '</td>' +
            '<td class="name-attr">Measurements</td>' +
            '<td>' + d.measurments + '</td>' +
            '<td class="name-attr">CertNum</td>' +
            '<td>' + d.certnum + '</td>' +
            '<td class="name-attr">Country region code</td>' +
            '<td>' + d.country + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td class="name-attr">Remarks</td>' +
            '<td>' + d.remarks + '</td>' +
            '</tr>' +
            '</table>';
      };

      var table = $('#table-upload').DataTable({
        data: testdata.data,
        searching: false,
        ordering: false,
        info: false,
        lengthMenu: [15, 30, 50, 75, 100],
        columns: [
          {
            "data": null,
            "render": function () {
              return '<input class="remove-item-flag" type="checkbox" /><div class="custom-checkbox"></div>';
            },
            "width": '1px',
          },
          {"data": "reference"},
          {"data": "product_title"},
          {"data": "shape"},
          {"data": "colour"},
          {"data": "clarity"},
          {"data": "cut"},
          {"data": "carat"},
          {"data": "price", "className": 'price',}
        ],
        initComplete: function () {
          $('#table-upload_length select').addClass('custom-select');
          $('.custom-select').select2();
        }
      });

    });
  });
</script>

colin

Hi @kos406 ,

When you say "it doesn't work" - it doesn't give us a lot to go on! You haven't said what the behaviour is, or whether you're seeing errors in the DB or the PHP or the client. Can you elaborate, and if possible, send us a link to your page?

Thanks,

Colin

kos406

Hi,@colin
There are no errors in the console and database. When you connect to the “js / dataTables.editor.min” request, the values are simply not displayed if you delete the “js / dataTables.editor.min” line from the request, and the editor initialization then everything works.

kthorngren

One issue that stands out is you have some Datatabales init code in your Editor init code:

      editor = new $.fn.dataTable.Editor( {
        data: testdata.data,   //Datatables
        table: '#table-upload',
        fields: [
          { label: 'reference',  name: 'reference'  },
          { label: 'product_title',  name: 'product_title'  },
          { label: 'shape',  name: 'shape'  },
          { label: 'colour',  name: 'colour'  },
          { label: 'clarity',  name: 'clarity'  },
          { label: 'cut',  name: 'cut'  },
          { label: 'carat',  name: 'carat'  },
          { label: 'price',  name: 'price'  },
        ],
        select: true,   //Datatables
        buttons: [      //Datatables
          { extend: 'create', editor: editor },
          { extend: 'edit',   editor: editor },
          { extend: 'remove', editor: editor }
        ]
      } );

the select and buttons options need to be moved into your Datatables init code.

Maybe start with looking at the examples of the features you want to use:
https://editor.datatables.net/examples/index

Kevin

kos406

Hi, @kthorngren

I saw this error and corrected it. The problem is clearly not the case, but thanks for the answer.

colin

Is it because the trial has expired perhaps? Or have you not purchased a license? I can't think of any other reason why it would fail like that. If you could link to the page, we're happy to take a look.

kos406

I use the free fifteen day version. Unfortunately, the page can not provide, because it happens locally on the computer

allan

I'm not sure there is going to be much help we can offer here if we can't see the page and there are no errors being displayed in the console.

Simply including the "dataTables.editor.js" file on your page shouldn't cause it to simply not work without any errors. I can't think of anything that would cause that to happen in fact.

We really would need a link to the page or a test case on http://live.datatables.net or JSFiddle showing the issue.

Allan