jQuery Girl
  1. jQuery Girl
  3. Éditer les informations de jQuery dataTables
Intereting Posts
Erreur “Uncaught TypeError: $ (…) .datetimepicker n’est pas une fonction” jQuery this à l’intérieur de chaque boucle En cascade DropDownListFor ASP.NET MVC Opera – Empêcher la saisie d’avoir le focus jQuery enregistre automatiquement le (s) gestionnaire (s) d’événements en actions de l’utilisateur sur les éléments ajoutés à DOM par la réponse Ajax Comment obtenir la diapositive visible actuelle dans un site de défilement vertical à l’aide de jQuery jquery clone select ne conserve pas la valeur JQuery – Erreur d’exécution Microsoft JScript: object attendu quand je clique sur le p: selectBooleanCheckbox, ça marche mais pour le deuxième clic ça ne marche pas, pourquoi? Passer une variable supplémentaire lors de la soumission d’un formulaire à l’aide de jQuery Requête JQuery AJAX POST avec caractères spéciaux Comment accéder aux données sérialisées depuis un site Web à l’aide de méthodes Web Ajax jquery à l’aide de méthodes Web c # asp.net Comment puis-je append des éléments à cet object jQuery autocomplete UI- Je voudrais qu’il lance la recherche onfocus sans que l’utilisateur ait à taper quoi que ce soit Publier un formulaire sans @ HTML.Beginform et utiliser Jquery (ajax) dans asp.net MVC

Éditer les informations de jQuery dataTables

J’utilise Jquery Data table pour présenter mon tableau. J’ai une colonne qui a enregistré comme actif ou inactif. Maintenant, je veux afficher le nombre de colonnes dont la valeur est active & inactive juste après où elle affiche 1 à 10 des 72 entrées.

Ma table comme ça entrez la description de l'image ici

Jquery 

 $(document).ready(function () { $('#example').dataTable({ "bLengthChange": true, "paging": true, "sPaginationType": "full_numbers" , //For Different Paging Style "scrollY": 400, // For Scrolling "jQueryUI": false, //Enabling JQuery UI(User InterFace) "lengthMenu": [[30, 50, 100, -1], [30, 25, 50, "All"]], drawCallback: function (settings) { var api = this.api(); // get the number of rows, but remove the page:current if you want number of rows in entire dataset var count = api.rows({ api: $('#example tbody tr td[value="active"]') }).data().length; // this takes the count and appends it in a span tag to the dataTables pageinate div element $('').html(count + ' rows').appendTo($('.dataTables_info')); } }); });

J’appendais un élément #active unique à .dataTables_info : 

 dom: 'lfrt<"info"i<"#active">>p',

Ensuite, utilisez drawCallback comme ceci 

 drawCallback: function() { var active = 0; this.api().rows({'filter':'applied'}).every(function() { if (this.data().active == 'active') active++ }) $('#active').html(active+ ' active ...'); }

démo -> http://jsfiddle.net/3dmpwokd/

Remarque : Si vous utilisez une table basée sur DOM, évaluez-la avec, par exemple, this.data()[2] au lieu de this.data().active .

J’ai ajouté ce CSS, je ne sais pas comment vous voulez présenter des informations 

 .dataTables_info { float: left !important; clear: none !important; } #active { display: inline-block; margin: 12px; }

Regardez les événements et utilisez celui qui est renvoyé après le match nul. Ensuite, vous pouvez appeler jQuery pour remplacer le texte de l’élément info.

Plus précisément, drawCallBack obtiendra les résultats dans le tableau, vous pourrez les filtrer comme vous le souhaitez, puis obtenir le nombre. ensuite, ajoutez simplement une étendue ou une balise à l’élément .dataTables_paginate. J’espère que ça aide un peu. 

 var table = $('#notifications') .DataTable({ drawCallback: function (settings) { //gets the table api instance var api = this.api(); // get the number of rows, but remove the page:current if you want number of rows in entire dataset var count = api.rows({ page: 'current' }).data().length; // this takes the count and appends it in a span tag to the dataTables pageinate div element $('').html(count + ' rows').appendTo($('.dataTables_paginate')); } });