DataTables

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

https://radeff.red/recettes/recettes/

<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

  • info/datatable.txt
  • Dernière modification: 2018/07/18 09:46
  • par radeff