jQuery DataTables rowReorder Problem

Question

Ich benutze DataTables zusammen mit dem rowReorder Plugin gegen eine statische Tabelle (nicht AJAX) - alles initialisiert gut, aber wenn ich eine Zeile ziehen, während es innerhalb der Tabelle bewegt, wenn ich drop es geht zurück zu seinem ursprünglicher Ort ohne Auffrischung (dh es bewegt sich nie wirklich Standort - bin mir bewusst, dass ich über AJAX aktualisieren muss, um den Umzug dauerhaft zu bekommen, aber ich brauche das zuerst zu arbeiten!)

Ich habe diesen Code hinzugefügt, um zu versuchen und mir zu sagen, was war passiert:

table.on('row-reorder', function (e, diff, edit) { 
     var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>'; 

     for (var i=0, ien=diff.length ; i<ien ; i++) { 
      var rowData = table.row(diff[i].node).data(); 

      result += rowData[1]+' updated to be in position '+ 
       diff[i].newData+' (was '+diff[i].oldData+')<br>'; 
     } 

     $('#event-result').html('Event result:<br>'+result); 
    }); 

und wenn ich diese, in ereignis Ergebnis, bekomme ich so etwas wie:

Event result: 
Reorder started on row: 3 
4 updated to be in position (was) 
5 updated to be in position (was) 
3 updated to be in position (was) 

Das Plugin kann sehen, dass ich Zeile 3 zu bewegen, versuche aber es scheint nicht der Lage zu sein, zu bestimmen, wo ich es versuche daher sind die neuen und alten Position zu fallen leer, während auf https://datatables.net/extensions/rowreorder/examples/initialisation/events.html können Sie sehen, dass es den Ort "kennen" sollte, an den er fallen soll, und wo er die 2 angrenzenden Spalten anordnen soll.

In allen Beispielen, die ich gesehen habe, gibt es keine IDs zu den Zeilen etc, also nehme ich an, dass dies durch einen Konflikt verursacht wird - wer hat das schon mal gesehen und kann es reparieren?

Hier ist meine ganze Datentabellen Code:

$.extend($.fn.dataTable.defaults, { 
     autoWidth: false, 
     dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>', 
     language: { 
      search: '<span></span> _INPUT_', 
      lengthMenu: '<span></span> _MENU_', 
      paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' } 
     } 
    });      
    // Column selectors 
    var table = $('.datatable-button-html5-columns').DataTable({ 
     //dom: 'lBfrtip', 
     initComplete: function() { 
      this.api().columns('.select-filter').every(function() { 
       var column = this; 
       var select = $('<select class="form-control"><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>') 
       }); 
      }); 
     }, 
     colReorder: true, 
     orderCellsTop: true, 
     stateSave: true, 
     pageLength: 10, 
     order:[[ 1, "asc" ]], 
     language: { 
      url: "/assets/js/plugins/tables/datatables/lang/en.php" 
     },   
     select: true, 
     rowReorder: { 
      selector: 'tr', 
      update: true 
     },   
     buttons: {    
      dom: { 
       button: { 
        className: 'btn btn-default' 
       } 
      }, 
      buttons: [ 
       { 
        extend: 'colvis', 
        titleAttr: 'Columns' 
       }, 
       { 
        extend: 'copyHtml5', 
        exportOptions: { 
         columns: ':visible' 
        } 
       }, 
       { 
        extend: 'excelHtml5', 
        exportOptions: { 
         columns: ':visible' 
        } 
       }, 
       { 
        extend: 'pdfHtml5', 
        exportOptions: { 
         columns: ':visible' 
        } 
       }, 
       { 
        extend: 'print', 
        exportOptions: { 
         columns: ':visible' 
        } 
       }, 
       { 
        text:  '<span id="resetTable">Reset</span>' 
       }     

      ] 
     }, 
     responsive: { 
      details: { 
       type: 'column', 
       target: 'tr' 
      } 
     }, 
     columnDefs: [ 
      { 
       className: 'control', 
       orderable: true, 
       targets: 0 
      } 
     ]       
    }); 

      // Setup event 
    table.on('row-reorder', function (e, diff, edit) { 
     var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>'; 

     for (var i=0, ien=diff.length ; i<ien ; i++) { 
      var rowData = table.row(diff[i].node).data(); 

      result += rowData[1]+' updated to be in position '+ 
       diff[i].newData+' (was '+diff[i].oldData+')<br>'; 
     } 

     $('#event-result').html('Event result:<br>'+result); 
    }); 

Answer 1

versuchen, eine ID oder eine Sequenz in der Tabelle hinzugefügt wird. In der basic initialization example heißt es:

Die erste Spalte in der Tabelle ist eine Sequenznummer, die die Grundlage für die Bestellung bietet.

In that example es eine versteckte Sequenz Spalte:

columnDefs: [ 
    { targets: 0, visible: false } 
] 

Answer 2

In Datatable Initialisierungscode, um Attribut entfernen. Wenn wir die Reihenfolge verwenden, funktioniert das Ziehen und Ablegen nicht.

Example with order - nicht funktioniert

table = $('#ConfigMenuTable').DataTable({ 
    data: testData, 
    "rowReorder": { 
       selector: 'td:nth-child(1)' 
      },    
    "order":[[ 1, "asc" ]], 
    "columns": [ 
       {"visible": false},       
       {"width": "20%", "className": 'reorder'},      
       {"visible": false,"searchable": true, "width": "15%"},  
       {"orderable": false, "searchable": false}, 
       {"orderable": false, "searchable": false}, 
       {"orderable": true, "searchable": false}     
      ] 

}); 

Example without order - Arbeits

table = $('#ConfigMenuTable').DataTable({ 
    data: testData, 
    "rowReorder": { 
       selector: 'td:nth-child(1)' 
      }, 
    "columns": [ 
       {"visible": false},  
       {"width": "20%", "className": 'reorder'}, 
       {"visible": false,"searchable": true, "width": "15%"}, 
       {"orderable": false, "searchable": false}, 
       {"orderable": false, "searchable": false}, 
       {"orderable": true, "searchable": false}     
      ]  
});