Markup-Code für Datatables funktioniert nur teilweise für die aktuelle Seite

Question

Dieser Code funktioniert teilweise. Es ändert korrekt jedes einzelne Eingabefeld innerhalb der Tabelle, aber ich brauche auch das Ereignis .change(), das aufgerufen wird, damit es andere Teile korrekt berechnet.

Das Ereignis change() funktioniert nur auf der aktuellen Seite der Datentabellen. Ich bewege mich auf andere Seiten und die Mathematik wird nicht berechnet.

table.on('dblclick', '[name="markupControl"]', function() { 
      var value = parseFloat($(this).val()).toFixed(2); 

      table.api().column(7).nodes().to$().find('input').val(value).change(); 

     }); 

Wann immer sie Klick auf ein Eingabefeld verdoppeln muss es das Markup Wert aller anderen Eingabefelder ändern, und dann muss es das Änderungsereignis nennen, die einige mathematische sicherzustellen, dass alles für den anderen summiert sich zu machen gilt Eingabefelder. Unten ist das Änderungsereignis, das ausgelöst werden soll.

table.on('change', '[name="markupControl"]', function() { 
      // Get the rate id from this element 
      var rateid = $(this).data('rateid'); 

      // Pricing variables 
      var cost = parseFloat($('div[name="costControl"][data-rateid="' + rateid + '"]').text().replace("$", '').replace(",", '')); 
      var markup = parseFloat($(this).val()); 

      // Update the Retail price for the correct plan retail box 
      var retailControl = $('input[name="retailControl"][data-rateid="' + rateid + '"]'); 
      var newRetail = parseFloat(cost + markup).toFixed(2); 
      retailControl.val(newRetail); 

      // Force this control to go back to 2 decimals 
      $(this).val(markup.toFixed(2)); 

      // Needed for later so we can call the change event on the retail control 
      retailControl.change(); 
     }); 

Ich gehe davon aus dem .change() Ereignisse nicht für Eingabefelder auf anderen Seiten mit dem Doppelklick gefeuert. Ich bin mir nicht sicher, was ich vermisse, damit das funktioniert.

EDIT:

Hier ist ein jsfiddle mein Problem darstellt. Ändern Sie jede Markup-Spalte und doppelklicken Sie dann auf dieses Eingabefeld. Sie sehen, dass alles funktioniert, bis Sie zur nächsten Seite wechseln.

https://jsfiddle.net/jamesjw007/hvk30q5w/

Answer 1

ich nicht 100% folgen, was die Absicht des Codes genau vorzuschlagen ist, wie es zu ändern, aber ich denke, dass die Wurzel des Problems ist, dass die Jquery Selektoren nur Dinge zurückkehren lassen vorhanden im DOM. Datatables aktualisiert das DOM im Handumdrehen. Die einzigen Elemente, die Ihre jquery-Selektoren finden, sind also diejenigen, die auf der aktuellen Seite vorhanden sind. Wenn Sie die Daten zu Artikeln aktualisieren möchten, die nicht angezeigt werden, sollten Sie die Methode data() verwenden.

Da Sie jede Zelle, die Sie abgleichen möchten, aktualisieren möchten, können Sie die Methode rows().every() verwenden und dann die Daten für jedes Element in der Zelle festlegen.

Stellen Sie sicher, dass Sie die draw()-Methode aufrufen, wenn Sie fertig sind oder Ihre Ergebnisse nicht angezeigt werden.