Jquery datatable z checkbox w nagłówku iw wierszu: zaznacz wszystkie pola wyboru nie działa

Question

Używam Jquery Datatable. Chcę mieć pierwszą kolumnę z nagłówkiem i wierszami z polem wyboru i przełączać zaznaczenie pola wyboru nagłówka z polami pozostałych wierszy. Mam poniżej wdrożenie.

DataTable atrybut

"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] 

DataTable rząd

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

Funkcja JavaScript

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

to działało dobrze, gdy jestem na jednej stronie. Ale kiedy wykonuję stronicowanie, pola wyboru pozostają niezaznaczone dla innej strony. Jak to osiągnąć, aby zachowywać się konsekwentnie dla wszystkich pól wyboru. Proszę o pomoc.

Answer 1

Powinieneś użyć funkcji fnDrawCallback, aby zaktualizować tabelę po zmianie strony.

Możesz sprawdzić w tej funkcji wartość pola wyboru nagłówka i zaktualizować pola wyboru nowych wierszy.

Możesz również dodać wartość boolowską do obiektów w modelu i zmienić tę wartość, gdy zaznaczysz lub odznacz. Jeśli masz dostęp do modelu, możesz modyfikować wartości wszystkich swoich elementów, a nie tylko renderowanych. Następnie, po załadowaniu komórek, reprezentujesz to pole wyboru "prawda/fałsz". Jest to najbardziej spójne podejście, ale prawdopodobnie wymaga znacznie więcej pracy, aby uzyskać dobrą synchronizację między modelem a widokiem.

Answer 2

guys,

miał podobny problem, który wymagał szybkiego rozwiązania.

Wykonane obejście tego problemu, może ktoś pomóc:

Jak dynamicznie karmić Tabela pewne dane:

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

Zawiadomienie rozpiętości do wyboru. To oczywiście pozostaje ukryte i można do niego łatwo uzyskać dostęp.

Answer 3

Zrobiłem coś takiego,

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

na dokumencie gotowości.