1
votes

Cases à cocher Jquery DataTable

J'utilise jquery datatable avec deux colonnes de case à cocher avec une case à cocher pour chaque colonne de l'en-tête du tableau. Je suis en train de parcourir toutes les cases à cocher dans la table de données pour chaque événement de modification sur une case à cocher pour m'assurer que la case à cocher checkAll est cochée / décochée, ce qui entraîne un décalage lorsque l'utilisateur coche une case.

Voici l'extrait de code. S'il vous plaît laissez-moi savoir s'il existe un autre moyen pour améliorer les performances.

ntfcTable.$('.ntfcInd')
            .change(
                    function() {
                        let counterNtfcCh = 0;
                        for (let i = 0; i < ntfcTableNodes.length; i++) {
                            if (ntfcTable.$('input[type="checkbox"][id="ntfcInd[' + i + ']"]').is(":checked") === true) {
                                counterNtfcCh++;
                            }
                        }
                        counterNtfcCh === ntfcTableNodes.length ? ntfcCheckAll.prop("checked", true)
                                : ntfcCheckAll.prop("checked", false);
                        checkBoxState = true;
                    });

javascript jquery datatables

1 commentaires

Ce serait mieux si vous pouvez fournir l'extrait de la datatable, afin que nous puissions l'expérimenter.

3 Réponses :

1
votes

J'espère que cela vous aidera. Je suppose que ntfcTable est un objet jQuery. Vous n'avez pas besoin de rechercher ntfcTable chaque fois que vous parcourez la table en boucle. La première ligne récupérera toutes les cases à cocher du tableau. Les objets jQuery ont une propriété length afin qu'ils puissent réellement être bouclés. Cela devrait fonctionner tant que vous n'ajoutez et ne supprimez pas de cases à la volée.

var ntfcTableNodes = ntfcTable.$('input[type="checkbox"]');
ntfcTableNodes.change(
                    function() {
                        let counterNtfcCh = 0;

                        for (let i = 0; i < ntfcTableNodes.length; i++) {
                            let checkNode = ntfcTableNodes[i];
                            if ( checkNode.is(":checked") === true ) {counterNtfcCh++;}
                        }
                        counterNtfcCh === ntfcTableNodes.length ? ntfcCheckAll.prop("checked", true)
                                : ntfcCheckAll.prop("checked", false);
                        checkBoxState = true;
                    });

3 commentaires

Salut Jason, Le code ci-dessus ne renverra que les éléments de la case à cocher de la page en cours. "ntfcTable.find ('input [type =" case à cocher "]');" Puisque j'utilise un datatable jquery, il se peut que je ne puisse pas l'utiliser.

Je suis désolé, je n'ai aucune expérience DataTables et je n'ai pas réalisé qu'ils supprimaient les données du DOM, donc les appels jQuery standard comme find ne fonctionneront pas. J'ai parcouru leur documentation et changé la première ligne pour utiliser leur API. .find () doit être. $ ()

Merci Jason, j'ai également apporté un petit ajustement au code checkNode.checked === true :)

0
votes

Au lieu de parcourir les cases à cocher, vous pouvez simplement vérifier la longueur des cases cochées comme ceci:

if(ntfcTable.$('input[type="checkbox"]:checked').length == ntfcTableNodes.length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

Ou pour votre cas, c'est comme ça:

alert($('input[type="checkbox"]:checked').length);

1 commentaires

Merci Bla! :)

0
votes

Même si, la question est marquée «Répondue» à ceux qui peuvent être confrontés au même problème, la solution, pour laquelle OP a demandé, se résume en gros à une seule ligne simple:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <table id="mytable"></table>
  </body>
</html>

0 commentaires