Editor: Only draw cell that has been edited

Stein-Dinse

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.

allan

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

Allan

Stein-Dinse

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

Stein-Dinse

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();