Answers

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

  July 12

  Can you show me your Editor and DataTables initialisation and any event handlers you might be using with it please?

  Thanks,
  Allan
• joris.kempen Posts: 6Questions: 2Answers: 0

  July 12

  Here is it in full: (I will try to create a smaller setup with 2-3 fields)

  <script type="text/javascript" language="javascript" class="init">
      var editor; // use a global for the submit and return data rendering in the examples
      $(document).ready(function() {
          jQuery.fx.off = true; //uitzetten popup animatie
          editor = new $.fn.dataTable.Editor({
              ajax: "../editor/controllers/klacht_relationeel.php",
              table: "#example",
              formOptions: {
                  main: {
                      onBackground: 'none'
                  }
              },
              template: '#customForm',
              fields: [{
                      label: "Soort:",
                      name: "klacht.klacht_soort_id",
                      type: "select"
                  },
                  {
                      label: "Status:",
                      name: "klacht.klacht_status_id",
                      type: "select"
                  },
                  {
                      label: "Klant naam:",
                      name: "klacht.klantnaam"
                  },
                  {
                      label: "Logboek:",
                      name: "klacht.logboek",
                      type: "textarea"
                  }
              ]
          });
  
          var table = $('#example').DataTable({
              ////////////// DIT stukt doet de kolom filter https://datatables.net/examples/api/multi_filter_select.html
              initComplete: function() {
                  this.api()
                      // sommige kolommen hebben geen nut voor filter, zoals een datum veld, want gaat niet zover als Excel dat je per jaar / maand kan selecteren
                      // kolommen lopen vanaf 0 = 1e kolom
                      .columns([2,3,9,10,11,12,13,14,15,16,17])
                      .every(function() {
                          var column = this;
                          var select = $('<select><option value=""></option></select>')
                              .appendTo($(column.footer()).empty())
                              .on('change', function() {
                                  var val = $.fn.dataTable.util.escapeRegex($(this).val());
  
                                  column.search(val ? '^' + val + '$' : '', true, false).draw();
                              });
                          column
                              .data()
                              .unique()
                              .sort()
                              .each(function(d, j) {
                                  select.append('<option value="' + d + '">' + d + '</option>');
                              });
                      });
              },
              ///////////////// einde kolom filter                
  
              pageLength: 10,
  
              fixedHeader: {
                  header: true,
                  footer: true
              },
              dom: 'PBftipr',
              language: {
                  url: '//cdn.datatables.net/plug-ins/2.0.3/i18n/nl-NL.json'
              },
              "ajax": {
                  "url": "../editor/controllers/klacht_relationeel.php",
                  "type": "POST",
                  "data": function(d) {
                      d.myYear = $('#jaarDropdown').val(); // Neem de waarde van de dropdown
                  }
              },
              columns: [{
                      data: "klacht.klacht_nr"
                  },
                  {
                      data: "klacht_soort.klacht_soort_tekst"
                  },
                  {
                      data: "klacht_status.klacht_status_tekst"
                  },
                  {
                      data: "klacht.ontvangst_datum"
                  },
                  {
                      data: "klacht.afgehandeld_datum"
                  },
                  {
                      data: "klacht.klantnummer"
                  },
                  {
                      data: "klacht.klantnaam"
                  },
                  {
                      data: "klacht.artikelnummer"
                  },
                  {
                      data: "klacht.artikelnaam"
                  },
                  {
                      data: "melder",
                      render: function(data, type, row) {
                          if (data && data.Naam && data.Achternaam) {
                              return data.Naam + ' ' + data.Achternaam;
                          }
                          return '';
                      }
                  },
                  {
                      data: "vestiging",
                      render: function(data, type, row) {
                          if (data && data.Naam && data.Achternaam) {
                              return data.Naam + ' ' + data.Achternaam;
                          }
                          return '';
                      }
                  },
                  {
                      data: "klacht_kanaal.klacht_kanaal_tekst"
                  },
                  {
                      data: "klacht_interventie.klacht_interventie_tekst"
                  },
                  {
                      data: "klacht_prioriteit.klacht_prioriteit_tekst"
                  },
  
                  {
                      data: "klacht_oplossing.klacht_oplossing_tekst"
                  },
                  {
                      data: "klacht_categorie.klacht_categorie_tekst"
                  },
                  {
                      data: "klacht_terecht.klacht_terecht_tekst"
                  },
                  {
                      data: "behandelaar",
                      render: function(data, type, row) {
                          if (data && data.Naam && data.Achternaam) {
                              return data.Naam + ' ' + data.Achternaam;
                          }
                          return '';
                      }
                  },
                  {
                      data: "klacht.logboek"
                  },
              ],
  
              //  datum kolommen laten zien in NL formaat en laatste kolom inkorten
  
              columnDefs: [{
                      targets: 3,
                      render: $.fn.dataTable.render.moment('DD-MM-YYYY')
                  },
                  {
                      targets: 4,
                      render: $.fn.dataTable.render.moment('DD-MM-YYYY')
                  },
                  {
                      targets: 13,
                      render: $.fn.dataTable.render.ellipsis(8, true)
                  },
                  {
                      targets: 18,
                      render: $.fn.dataTable.render.ellipsis(17, true)
                  }
              ],
  
              select: true,
              buttons: [{
                      extend: "edit",
                      editor: editor
                  },
                  {
                      extend: "remove",
                      editor: editor
                  },
                  {
                      extend: 'collection',
                      text: 'Export',
                      buttons: [
                          'copy',
                          'excel'
                      ]
                  }
              ]
          });
  
  
      }
  </script>
  
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  July 12

  There is nothing obvious there unfortunately. Are you able to PM me a link to the page in question so I can trace through it?

  Thanks,
  Allan