Difference between revisions of "WebDev"

From www.wiki.chlamdb.ch
Jump to navigation Jump to search
(Created page with "<br /> == DataTable == === WordWrap specific column of the table === * first add a class to the target column <syntaxhighlight lang="javascript+myghty"> $('#example').dataT...")
 
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 
<br />
 
<br />
  
−
== DataTable ==
+
==DataTable==
  
−
=== WordWrap specific column of the table ===
+
===WordWrap specific column of the table===
  
−
* first add a class to the target column
+
*first add a class to the target column
 
<syntaxhighlight lang="javascript+myghty">
 
<syntaxhighlight lang="javascript+myghty">
 
$('#example').dataTable( {
 
$('#example').dataTable( {
Line 14: Line 14:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
* Then add css to customize column
+
*Then add css to customize column
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
 
table td.wrapcol {
 
table td.wrapcol {
Line 24: Line 24:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
== Divers ==
 
  
−
=== Dessin download ===
+
===render very large tables===
 +
 
 +
* https://www.reddit.com/r/django/comments/3hlhgq/best_way_to_render_large_data_tables_in_django/
 +
* https://www.datatables.net/examples/server_side/simple.html
 +
 
 +
 
 +
==Divers==
 +
 
 +
===Dessin download===
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
 
<i class="fa fa-download">
 
<i class="fa fa-download">
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
== CSS ==
+
==CSS==
  
−
=== Hide elements ===
+
===Hide elements===
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
 
#ref{
 
#ref{
Line 40: Line 47:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
== Javascript ==
+
==Javascript==
 
<br />
 
<br />
  
−
=== Link directly to specific boostrap tab ===
+
===Link directly to specific boostrap tab===
 
<br /><syntaxhighlight lang="javascript">
 
<br /><syntaxhighlight lang="javascript">
 
// Javascript to enable link to tab
 
// Javascript to enable link to tab

Latest revision as of 19:50, 28 July 2019


DataTable

WordWrap specific column of the table

  • first add a class to the target column
$('#example').dataTable( {
  "columnDefs": [
    { className: "wrapcol", "targets": [ 1 ] }
  ]
} );
  • Then add css to customize column
table td.wrapcol {
  word-break: break-all;
  word-wrap: break-word;
  width: auto;
}


render very large tables


Divers

Dessin download

<i class="fa fa-download">

CSS

Hide elements

#ref{
display: none;
}

Javascript


Link directly to specific boostrap tab


// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})