Editor not working

Editor not working

kos406kos406 Posts: 4Questions: 0Answers: 0
edited October 2018 in Free community support

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>

Replies

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • kos406kos406 Posts: 4Questions: 0Answers: 0
    edited October 2018

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kos406kos406 Posts: 4Questions: 0Answers: 0

    Hi, @kthorngren

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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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.

  • kos406kos406 Posts: 4Questions: 0Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.