Comment puis-je sélectionner toutes les cases à cocher de toutes les pages du jQuery Datatables

J'ai de la page HTML qui ont plusieurs cases à cocher et individuellement, ils peuvent être contrôlés. J'ai de bouton "Sélectionnez Tous les" et quand je clique sur ce bouton, toutes les cases à cocher doivent être sélectionnés, et quand je clique à nouveau sur le même bouton toutes les cases à cocher doivent obtenir désélectionné à partir de toutes les pages.

Dans mon programme, il y a des milliers de dossiers, mais à un moment 10 enregistrements sont l'obtention d'affichage, mais lorsque l'utilisateur cliquez sur sélectionner, il faut sélectionner tous les milliers enregistrement.

Je suis en utilisant jQuery Datatables plug-in pour l'affichage des données. Il fournit de la pagination, de la recherche, de tri, etc. à un moment, je suis en affichant seulement 10 enregistrements sur ma page. si je clique sur suivant ou de numéro de page qui est fourni par Bootstrap Datatable un autre 10 enregistrements seront affichés. Comme mentionné dans le problème, je veux sélectionner toutes les cases à partir de toutes les pages.

JS:

$(document).ready(function () {
   $('body').on('click', '#selectAll', function () {
      if ($(this).hasClass('allChecked')) {
         $('input[type="checkbox"]', '#example').prop('checked', false);
      } else {
       $('input[type="checkbox"]', '#example').prop('checked', true);
       }
       $(this).toggleClass('allChecked');
     })
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>monitoring</title>
<script src="jquery.js"></script>
</head>
<body>
<table id="example" class="myclass">
<thead>
<tr>
<th>
<button type="button" id="selectAll" class="main">
<span class="sub"></span> Select </button></th>
<th>Name</th>
<th>Company</th>
<th>Employee Type</th>
<th>Address</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>varun</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Rahuk</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>johm Doe</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Sam</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Lara</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Jay</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Tom</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>

double possible de Sélectionner toutes les cases à cocher à l'aide du bouton
Le tablebalise n'est pas un auto-balise de fermeture, s'il vous plaît changer <table id="example" class="myclass"/> et retirer le /
Vous avez posté la même question stackoverflow.com/questions/29841547/... et stackoverflow.com/questions/29823843/...? Utilisez des liens de modification sur les mêmes questions
Votre code devrait fonctionner. Pouvez-vous partager l'erreur que vous obtenez ou le problème que vous rencontrez? Pourquoi êtes-vous poster la même question à nouveau, plz modifier votre question précédente ou de nous dire le réel problème que vous rencontrez.
il travaille sur une page en cours, mais ce que je veux, c'est quand je clique sur un bouton, il faut sélectionner toutes les cases à cocher bof toutes les pages
Qu'entendez-vous par toutes les pages, n'est-ce pas votre table complète en 1 page? Comment êtes-vous de l'affichage de votre table dans les différentes pages? Merci d'ajouter cette info dans votre question, de sorte que le ppl ici peuvent vous aider à mieux.
nous avons besoin d'initialiser notre tableau à l'aide de dataTable. si nous le faisons comme ça. $(document).ready(function(){ $('#example').DataTable(); }); et nous avons besoin d'importer certains bootstrap.js fournis par Bootstrap dataTable lui-même. vous pouvez suivre ce lien pour obtenir plus d'info datatables.net/examples/basic_init/zero_configuration.html

InformationsquelleAutor Varun | 2015-04-27

26

Essayer ce code à la place:
```
$(document).ready(function () { 
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.fnGetNodes();
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', allPages).prop('checked', false);
} else {
$('input[type="checkbox"]', allPages).prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
```
La magie qui devrait arriver dans fnGetNodes():

fnGetNodes(): Obtenir un tableau de la TR nœuds qui sont utilisés dans le tableau du corps

Modifier

Cette solution alternative est la plupart du temps à des fins de débogage (pour voir si elle fonctionne). À peine un code optimal:
```
$(document).ready(function () { 
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.cells( ).nodes( );
$('#selectAll').click(function () {
if ($(this).hasClass('allChecked')) {
$(allPages).find('input[type="checkbox"]').prop('checked', false);
} else {
$(allPages).find('input[type="checkbox"]').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});    
```
- désolé d'être si stupide, mais pouvez-vous m'aider avec cela. Je suis totalement nouveau avec ce. ou tout simplement vous donner une idée, comment dois-je faire
- J'ai mis à jour les deux codes un peu - depuis la nouvelle version de tables de données apparemment, utiliser une autre définition des options.
- vous êtes des génies. enfin vous l'avez fait. le premier code enfin travaillé
- Être conscient de cela ne fonctionnera pas si vous utilisez DataTable.sélectionnez et de la sortie des x rows selected. Les cases à cocher doivent être effectivement déclenchée avant de tables de données enregistre.
- C'est très bien, jusqu'à ce que nous ne sommes pas à la recherche quelque chose. Si nous utilisons un filtre ou de recherche, puis sur l'option sélectionner tout obtenu disparu. Est-il possible d'avoir l'option sélectionner tout disponible après filtrage aussi?
- href="http://stackoverflow.com/questions/42341158/how-to-pass-checked-data-from-jquery-data-table-pagination-to-struts-action-clas" title="comment passer vérifié les données de jquery tableau de données de la pagination à jambes de suspension de l'action clas">stackoverflow.com/questions/42341158/...
InformationsquelleAutor Mackan
2

Utilisation datatable $ instance pour les sélections https://datatables.net/docs/DataTables/1.9.4/#$
```
$(document).ready(function () { 
var oTable = $('#example').dataTable({
stateSave: true
});
$("#selectAll").on("change", function(){
oTable.$("input[type='checkbox']").attr('checked', $(this.checked));  
});
});
```
- Cette option est très propre option pour utiliser et je l'ai utilisé moi-même, cependant, il doit être mis à jour à $(this).is(":checked")
InformationsquelleAutor Venu Duggireddy

Essayer Cela,

JS:

   if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]').prop('checked', 'checked')
} else {
$('input[type="checkbox"]').prop('checked', 'false')
}

InformationsquelleAutor syms

DÉMO

Plus simple est d'utiliser à la suite de jQuery code:

//EDIT sur le second clic, vous pouvez désormais supprimer toutes les cases cochées.

JS:

$('#selectAll').click(function(e) {
if($(this).hasClass('checkedAll')) {
$('input').prop('checked', false);   
$(this).removeClass('checkedAll');
} else {
$('input').prop('checked', true);
$(this).addClass('checkedAll');
}
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>monitoring</title>
<script src="jquery.js"></script>
</head>																			<body>
<table id="example" class="myclass"/>
<thead>
<tr>
<th>
<button type="button" id="selectAll" class="main">
<span class="sub"></span> Select </button></th>
<th>Name</th>
<th>Company</th>
<th>Employee Type</th>
<th>Address</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>varun</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Rahuk</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>johm Doe</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Sam</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Lara</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Jay</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td><input type="checkbox"/>
</td>
<td>Tom</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>

il est en train de travailler? vous pouvez exécuter l'extrait de code ci-dessus. n'oubliez pas d'ajouter la bibliothèque jquery dans votre propre extrait de!
J'ai inclus la bibliothèque jQuery dans mon code mais sa ne fonctionne pas
j'ai même essayé avec votre code, ce qui est bien. peut-être que vous pouvez nous donner un message d'échec?
Je dirais que c'est effectivement un pas pire que le code d'origine (enfin, j'ai écrit la fonction qu'il utilise, donc je suis partial) 😉 Ce n'est pas l'adresse la demande par l'utilisateur si: Comment sélectionner/désélectionner de toutes les pages

InformationsquelleAutor Doml The-Bread

0

utilisation dataTables.checkboxes.min.js et l'utilisation "selectAllPages" : false . Il convient de travail pour la sélection de chaque page de documents .

InformationsquelleAutor kishore cheruku

var oTable = $('#myTable').DataTable({
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']]
//stateSave: true
});
$('#selectAll').on('change', function() {
oTable.$('.student_id:checkbox').prop('checked', $(this).prop('checked'));
});
jQuery(document).on('change', '.student_id', function() {
if (jQuery(this).is(':checked')) {
if (jQuery('.student_id:checked').length == jQuery('.student_id').length) {
jQuery('#selectAll').prop('checked', true);
} else {
jQuery('#selectAll').prop('checked', false);
}
} else {
jQuery('#selectAll').prop('checked', false);
}
});

Veuillez envisager de fournir une brève explication de votre réponse pour une meilleure compréhension

InformationsquelleAutor kush

Vous devez vous connecter pour publier un commentaire.