jQuery

Ceci est une ancienne révision du document !

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages

Note Fred: j'ai toujours détesté js… jusqu'à ce que je découvre jQuery, qui le rend efficace et (presque) sympathique!

Table plug-in for jQuery

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

https://datatables.net/

note FredR: LE plugin de la mort qui tue pour jQuery, il permet d'ajouter un moteur de recherche avec filtre sur n'importe quel tableau HTML - merci à R.G. pour le filon

et si on veut afficher un résumé avec tout en un clic: https://www.datatables.net/blog/2017-03-31

<head>
<!--- ... --> 
<!-- bootstrap begin -->
	<!-- new RD bootstrap -->
	<script src="/cdn/jquery/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/cdn/bootstrap/css/bootstrap.min.css" />
	<script src="/cdn/bootstrap/js/bootstrap.min.js"></script>
	<script src="/cdn/bootstrap/js/bootstrap-transition.js"></script>
	<script src="/cdn/bootstrap/js/bootstrap-collapse.js"></script>
<!-- bootstrap end -->
<!--  Include jQuery DataTables -->
<script src="/cdn/datatables/datatables.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/cdn/datatables/datatables.min.css" />
	<script language="javascript" src="/cdn/datatables/dataTables.buttons.min.js"></script>
	<script language="javascript" src="/cdn/datatables/buttons.flash.min.js"></script>
	<script language="javascript" src="/cdn/datatables/jszip.min.js"></script>
	<script language="javascript" src="/cdn/datatables/pdfmake.min.js"></script>
	<script language="javascript" src="/cdn/datatables/vfs_fonts.js"></script>
	<script language="javascript" src="/cdn/datatables/buttons.html5.min.js"></script>
	<script language="javascript" src="/cdn/datatables/buttons.print.min.js"></script>
 
<script>
$(document).ready(function(){
$('#example').DataTable( {
  language: {
      url: '/cdn/datatables/French.json'
  },
    "iDisplayLength": 100,
    order: [[2, 'asc']],
    dom: 'Bfrtip',
    buttons: [
      'pageLength',  'copy', 'csv', 'excel',  'print'
    ]
} );
 
});
</script>
</head>

datatable

datatables

isotope

source: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Overriding the $-function

However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

http://docs.jquery.com/Tutorials

http://www.siteduzero.com/tutoriel-3-160891-jquery-ecrivez-moins-pour-faire-plus.html

http://blog.nicolargo.com/2008/01/tutorial-jquery.html

http://babylon-design.com/apprendre-et-comprendre-jquery-1-3/

http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

jQuery video Tutorial - 12 - All selector