Editor: Only draw cell that has been edited

Editor: Only draw cell that has been edited

Stein-DinseStein-Dinse Posts: 3Questions: 1Answers: 0

Hello everyone,

I have a table with client side data. For one of these cells i use the bubble edit to change the value. The update in the database works fine, but the problem is that the callback returns only the changed parameter but the editor wants to redraw the full row, what causes this error:

DataTables warning: table id=artikelliste - Requested unknown parameter 'artikelnr' for row 1, column 0. For more information about this error, please see http://datatables.net/tn/4

I tried this, so it prevents the row to be redrawn but the error still exists:

var editor = new $.fn.dataTable.Editor({
        ajax: '/phoenix/stammdaten/inkl_ajax_artikelliste_new_editor.php',
        table: '#artikelliste',
        fields: [
          {label: 'Bezeichnung', name: 'bez', entityDecode: true}
        ],
        i18n: {
          edit: {
            title: "Eintrag bearbeiten"
          }
        },
        formOptions: {
          bubble: {
            submit: 'changed',
            scope: 'cell',
            drawType: 'none'
          }
        }
      });

Is it possible to only redraw the cell that has been edited, because the other cell are calculated client side.

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    What version of Editor are you using? This should work out of the box with Editor 1.8.

    Allan

  • Stein-DinseStein-Dinse Posts: 3Questions: 1Answers: 0

    I am using Editor 1.8 and DataTables 1.10.18, updated 2 days ago

  • Stein-DinseStein-Dinse Posts: 3Questions: 1Answers: 0

    Datatables

    var oTable = $('#artikelliste').on('error.dt', function(e, settings, techNote, message) {
            console.log( 'An error has been reported by DataTables: ',message);
          }).DataTable({
            buttons: [
              {
                extend: 'copy',
                text: 'Copy',
                title: '',
                titleAttr: 'Kopiert die Daten in die Zwischenablage',
                exportOptions: {
                  columns: [0, 1, 2, 6, 9, 10, 12, 13]
                }
              },
              {
                extend: 'print',
                text: 'Drucken',
                titleAttr: 'Druckt das Suchergebnis',
                exportOptions: {
                  columns: [0, 1, 2, 6, 9, 10, 12, 13]
                },
                customize: function (win) {
                  $(win.document.body).find('td:nth-child(1)').css('text-align', 'left');
                  $(win.document.body).find('td:nth-child(2)').css('text-align', 'left');
                  $(win.document.body).find('td:nth-child(3)').css('text-align', 'left');
                  $(win.document.body).find('td:nth-child(8)').css('text-align', 'right');
                  $(win.document.body).find('h1').css('text-align', 'center');
                }
              },
              {
                extend: 'pdfHtml5',
                text: 'PDF',
                download: 'download',
                orientation: 'landscape',
                //orientation: 'portrait',
                pageSize: 'A4',
                title: 'Artikel Liste',
                filename: 'Artikel Liste <?php echo date("Ymd_His"); ?>',
                titleAttr: 'Erstellt eine PDF Datei',
                exportOptions: {
                  columns: [0, 1, 2, 6, 9, 10, 12, 13]
                }
              },
              {
                extend: 'excel',
                text: 'Excel',
                download: 'download',
                filename: 'Artikel Liste <?php echo date("Ymd_His"); ?>',
                titleAttr: 'Erstellt eine Excel xlsx Datei',
                exportOptions: {
                  columns: [0, 1, 2, 6, 9, 10, 12, 13]
                }
              },
              {
                extend: 'csv',
                text: 'CSV',
                download: 'download',
                filename: 'Artikel Liste <?php echo date("Ymd_His"); ?>',
                titleAttr: 'Erstellt eine CSV Datei',
                exportOptions: {
                  columns: [0, 1, 2, 6, 9, 10, 12, 13]
                }
              },
              {
                extend: 'copy',
                text: 'Copy Artiklnr./Bez./Vk',
                titleAttr: 'Kopiert die Daten in die Zwischenablage',
                header: false,
                title: '',
                key: {
                  key: 'c',
                  altKey: true,
                },
                exportOptions: {
                  columns: [2, 13]
                }
              }
              // {extend: 'edit', editor: editor}
            ],
            dom: 'RC<"clear">lBrtip',
            idSrc: 'id',
            columnDefs: [{
              aDataSort: [0], "aTargets": [0]
            },
              {"bSortable": false, "aTargets": [3]},
    
            ],
            columns: [
    
              {data: "artikelnr"},
              {data: "dnummer"},
              {data: "bez"},
              {data: "etikett"},
              {data: "zuordnung"},
              {
                orderSequence: ["desc", "asc"],
                data: "text"
    
              },
              {data: "linr"},
              {orderSequence: ["desc", "asc"], data: "lager"},
              {orderSequence: ["desc", "asc"], data: "laden"},
              {orderSequence: ["desc", "asc"], data: "bestand"},
              {data: "abc"},
              {orderSequence: ["desc", "asc"], data: "umsatz"},
              {orderSequence: ["desc", "asc"], data: "bestellt"},
              {data: "vk"},
              {orderSequence: ["desc", "asc"], data: "bild"}
            ],
            processing: true, // Hinweistext das Datatables arbeitet
            autoWidth: false, // Automatische Berechnung der Zellen breite
            filter: false, // Suche in Tabelle aktivieren
            info: true, // Informationen im Tabellenfooter
            displayLength: 20, // Anzahl der Zeilen die gerendert werden sollen
            pagingType: "full_numbers", // Art wie die Blätter Knöpfe dargestellt werden (numbers, simple, simple_numbers, full, fullnumbers, first_last_numbers)
            language: { // Übersetzungen
              sEmptyTable: "Keine Daten vorhanden.",
              oPaginate: {
                sFirst: "Anfang",
                sLast: "Ende",
                sPrevious: "Vor",
                sNext: "Weiter"
              },
              buttons: {
                copyTitle: 'Kopieren in die Zwischenablage',
                copySuccess: {
                  1: "Eine Reihe wurde in die Zwischenablage kopiert",
                  _: "%d Reihen wurden in die Zwischenablage kopiert"
                }
              },
              search: "Suchen nach: ",
              processing: "DataTables is currently busy",
              info: "_START_ bis _END_ von _TOTAL_ Einträgen",
              infoEmpty: "0 bis 0 von 0 Einträgen",
              infoFiltered: "(gefiltert von _MAX_  Einträgen)",
              select: {
                rows: {
                  "_": "%d Zeilen ausgewählt",
                  "0": "",
                  "1": "1 Zeile ausgewählt"
                }
              },
              lengthMenu: '<select>' +
                  '<option value="10">10</option>' +
                  '<option value="20">20</option>' +
                  '<option value="30">30</option>' +
                  '<option value="50">50</option>' +
                  '<option value="100">100</option>' +
                  '<option value="-1">Alle</option>' +
                  '</select> Einträge anzeigen'
            } // Ende übersetzung
          });
    
          oTable.order([0, "asc"]).draw();
    

    Ajax

    // Alias Editor classes so they are easy to use
    use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Mjoin,
        DataTables\Editor\Options,
        DataTables\Editor\Upload,
        DataTables\Editor\Validate,
        DataTables\Editor\ValidateOptions;
    
    
    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'artikel_copy' )
        ->fields(
            Field::inst( 'bez' )
                ->validator( Validate::notEmpty( ValidateOptions::inst()
                    ->message( 'Bezeichnung ist erforderlich' )
                ) )
            //,
            //Field::inst( 'linr' )
            //    ->validator( Validate::notEmpty( ValidateOptions::inst()
            //        ->message( 'Lieferantennr ist erforderlich' )
            //    ) )
        )
        ->process( $_POST )
        ->json();
    
This discussion has been closed.