web-dev-qa-db-fra.com

Comment puis-je sélectionner toutes les cases à cocher de toutes les pages d'un tableau de données jQuery

J'ai une page HTML qui a plusieurs cases à cocher et individuellement, elles peuvent être vérifiées. J'ai un bouton pour " Tout sélectionner" et lorsque je clique sur ce bouton, toutes les cases à cocher doivent être sélectionnées, et lorsque je clique à nouveau sur le même bouton, toutes les cases à cocher doivent être désélectionnées de toutes les pages .

Dans mon programme d'origine, il y a des milliers d'enregistrements, mais à la fois 10 enregistrements s'affichent, mais lorsque l'utilisateur clique sur sélectionner, il doit sélectionner tous les milliers d'enregistrements.

J'utilise plug-in jQuery Datatables pour afficher les données. Il fournit la pagination, la recherche, le tri, etc. donc à la fois je n'affiche que 10 enregistrements sur ma page actuelle. si je clique sur le numéro suivant ou sur la page qui est fourni par Bootstrap Datatable, 10 autres enregistrements seront affichés. Comme mentionné dans le problème, je veux sélectionner toutes les cases à cocher de toutes les pages.

$(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');
     })
});
<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>
javascriptjqueryhtmljquery-datatables
14
Varun

Essayez plutôt ce code:

$(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 devrait se produire dans fnGetNodes():

fnGetNodes () : récupère un tableau des nœuds TR utilisés dans le corps du tableau

Modifier

Cette solution alternative est principalement destinée au débogage (pour voir si cela fonctionne). Code peu 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');
    })
});
25
Mackan

Utiliser l'instance $ datatable 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));  
    });
});
2
Venu Duggireddy

Essaye ça,

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

DÉMO

Le moyen le plus simple consiste à utiliser le code jQuery suivant:

// EDIT au deuxième clic, vous supprimez maintenant toutes les cases cochées.

$('#selectAll').click(function(e) {
    if($(this).hasClass('checkedAll')) {
      $('input').prop('checked', false);   
      $(this).removeClass('checkedAll');
    } else {
      $('input').prop('checked', true);
      $(this).addClass('checkedAll');
    }
});
<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>
1
Doml The-Bread

utilisez dataTables.checkboxes.min.js et utilisez "selectAllPages" : false. Cela devrait être un travail pour la sélection de chaque enregistrement de page.

0
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);
    }
});
0
kush