jQuery Girl
  1. jQuery Girl
  3. Info-bulle pour les boutons de pagination dans les DataTables
Intereting Posts
Comment savoir si l’utilisateur clique sur le bouton «Précédent»? Supprimer des éléments enfants à partir d’un index? json parsing d’erreur erreur de syntaxe fin inattendue de l’entrée Exécuter la fonction sur Scroll jQuery Comment passer des variables javascript d’une page HTML à une autre page HTML Problèmes avec e.preventDefault () Déclencher un événement lorsque l’utilisateur s’éloigne Recherche d’un plugin de cycle JQuery pour Mootools D3: Afficher la disposition du réseau atteignant, puis arrêter la force Comment puis-je fermer / fermer Bootstrap Popover lorsque je clique sur l’élément déclencheur popover? Image de fond du site Web Animation horizontale Boucle infinie? Comment obtenir les nouvelles dimensions d’un élément * après * son redimensionnement en raison d’un changement d’orientation de l’écran? Uncaught SyntaxError: Identifiant inattendu – erreur dans la machine virtuelle Chrome javascript / jquery open.window popup se déclenche après environ: déchargements vierges Ember rendre le modèle en utilisant le rendement

Info-bulle pour les boutons de pagination dans les DataTables

J’ai un datatable où je dois montrer l’info-bulle sur chaque ligne et dans les boutons de pagination aussi. J’ai implémenté l’option d’infobulle pour les lignes à chaque fois que nécessaire, mais je ne suis pas capable de comprendre comment définir l’info-bulle pour les contrôles tels que les boutons de pagination (boutons Précédent et Suivant), la recherche (zone de texte) et le sorting (liste déroulante) dans les tables de données.

HTML: 

 
  
 Name Position Office Age Start date Salary 
   
 Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 
 
 Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 
 
 Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 
 
 Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 
 
 Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 
 
 Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 
 
 Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 
 
 Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 
 
 Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 
 
 Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 
 
 Jena Gaines Office Manager London 30 2008/12/19 $90,560 
 
 Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 
 
 Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600

JS: 

 $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on( 'click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $('#example').dataTable({ bJQueryUI: true, resortingeve: true, "sPaginationType": "full_numbers"}).makeEditable({"aoColumns": [ { cssclass: "required" }, { cssclass: "required" }, { indicator: 'Saving...', tooltip: 'Click to edit', //tooltip for row type: 'text', submit:'Save' }, { indicator: 'Saving...', tooltip: 'Click to enter age', //tooltip for row loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'':'Select', 'A':60,'B':12,'C':23,'D':25,'E':65}" }, { indicator: 'Saving...', tooltip: 'Click to select', //tooltip for row loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'':'Select...', 'A':'A','B':'B','C':'C'}" }, { cssclass: "required" } ] }); });

Voici le JSFiddle pour le même. Toute aide serait appréciée.

Je pense que vous voulez dire des titres? Pour une raison particulière, cela ne fait pas partie de l’API native. À mon avis, il serait évident d’inclure title / tooltips-options dans la construction du language … 

 $('.paginate_button').each(function() { var text = $(this).text(), title = isNaN(text) ? text+' page' : 'Page '+text; $(this).attr('title', title); });

Définira le title sur les boutons de pagination, comme “Page précédente”, “Page 3” etc. 

 $('.dataTables_filter input').attr('title', 'Type here to search in the table'); $('.dataTables_length select').attr('title', 'Select number of visible rows');

– pour le filtre / champ de recherche et le menu de longueur.

Placez ce qui précède dans un événement draw.dt afin que le title des éléments de contrôle soit mis à jour chaque fois que la table est redessinée: 

 table.on('draw.dt', function() { $('.paginate_button').each(function() { var text = $(this).text(), title = isNaN(text) ? text+' page' : 'Page '+text; $(this).attr('title', title); }); $('.dataTables_filter input').attr('title', 'Type here to search in the table'); $('.dataTables_length select').attr('title', 'Select number of visible rows'); })