Jquery Datatable mit Kontrollkästchen in der Kopfzeile und in der Zeile: Wählen Sie alle Kontrollkästchen nicht funktioniert

Question

Ich verwende Jquery Datatable. Ich möchte eine erste Spalte mit Kopfzeile und Zeilen mit einem Kontrollkästchen haben und sollte das Kontrollkästchen für die Auswahl der Kopfzeile mit den Kontrollkästchen der verbleibenden Zeile aktivieren. Ich habe unten Implementierung.

Datentabelle Attribut

"aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null] 

Datentabelle Reihe

<td><input type="checkbox' class="case"></input></td> 

Javascript Funktion

function toggleChecks(obj) 
    { 
     $('.case').prop('checked', obj.checked); 
    } 

Das funktionierte gut, wenn ich auf einer einzigen Seite bin. Aber wenn ich den Seitenwechsel mache, bleiben die Kontrollkästchen für andere Seiten deaktiviert. Wie erreichen Sie dies für ein konsistentes Verhalten für alle Checkboxen. Bitte helfen.

Answer 1

Sie sollten die Funktion fnDrawCallback verwenden, um dort die Tabelle zu aktualisieren, wenn sich die Seite ändert.

Sie können in dieser Funktion den Wert des Kontrollkästchens "Header" überprüfen und die Kontrollkästchen für neue Zeilen aktualisieren.

Sie können Ihren Objekten im Modell auch einen booleschen Wert hinzufügen und diesen Wert ändern, wenn Sie das Kontrollkästchen aktivieren oder deaktivieren. Wenn Sie auf das Modell zugreifen, können Sie die Werte aller Ihrer Elemente ändern, nicht nur die gerenderten. Dann, wenn Sie Ihre Zellen laden, repräsentieren Sie das Wahr/Falsch mit der Checkbox. Dies ist der konsistenteste Ansatz, erfordert jedoch wahrscheinlich viel mehr Arbeit, um eine gute Synchronisierung zwischen dem Modell und der Ansicht zu erreichen.

Answer 2

Jungs,

hatte ein ähnliches Problem, das eine schnelle Lösung brauchte.

Hergestellt für dieses Problem eine Abhilfe, könnte helfen, jemand:

Als ich die Tabelle einige Daten dynamisch füttern:

oTable1.fnAddData 
([ 
    "<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>", 
    title, 
    modified, 
    version 
]); 

Hinweis die Spanne für das Kontrollkästchen. Dies bleibt natürlich verborgen und kann leicht erreicht werden.

Answer 3

ich etwas getan haben, wie,

$('#selectall').change(function() { 
         var isSelected = $(this).is(':checked'); 
         if(isSelected){ 
          $('.case').prop('checked', true); 
         }else{ 
          $('.case').prop('checked', false); 
         } 
        }); 

auf Dokument bereit.