tech @ Beacon Deacon

A DataTable with customized drop-down menus
- Jamie Johnson

Jamie Johnson

September 2, 2019

I have found some interesting issues when using SpryMedia's DataTables Table plug-in for jQuery and my desire to customize them. You may have read my other articles about DataTables. Let me introduce yet another customization. The DataTable has customized drop-down select menus. I have a drop-down select menu table that is separate from the DataTable itself. And in this separate table I use code for both customized select menu widths and default selected option text. I also have allowed links in the table without disrupting the drop-down select menus or their functionality.

Days/Months Origins Language
Sunday Sun's day English
domingo Lord's day (think Domini) Spanish
Monday Moon's day English
lunes From Luna, meaning moon Spanish
Tuesday Tyr's/Tiw's day. Tyr was a Norse god of war. English
martes Mars, Roman god of war Spanish
Wednesday Woden's day. Woden was the chief Norse god. English
miércoles Mercury Spanish
Thursday Thor's day, another Norse god reference English
jueves Jove - Jupiter Spanish
Friday Frigga's day. Frigga was Norse goddess of love. English
viernes Venus - Roman goddess of love Spanish
Saturday Saturn's day English
sábado Sabbath Spanish
January Janus, Roman two-faced god English
enero Janus, Roman two-faced god Spanish
February From februare - to purify English
febrero From februare - to purify Spanish
March Mars, Roman god of war English
marzo Mars, Roman god of war Spanish
April Uncertain, but has been said to mean opening. English
abril Uncertain, but it is very similar to the Spanish word abrir, which means to open. Spanish
May Maia, Roman earth goddess English
mayo Maia, Roman earth goddess Spanish
June Juno, Roman goddess married to Jupiter English
junio Juno, Roman goddess married to Jupiter Spanish
July Julius Caesar English
julio Julius Caesar Spanish
August Augustus Caesar English
agosto Augustus Caesar Spanish
September Seven English
septiembre Seven Spanish
October Eight English
octubre Eight Spanish
November Nine English
noviembre Nine Spanish
December Ten English
diciembre Ten Spanish

References: My own knowledge, ThoughtCo: Learn the Days of the Week in Spanish and ThoughtCo: Months of the Year in Spanish

And why does December mean ten? Originally, there were 10 months in the ancient Roman calendar. And yes, the months are more boring than the days with respect to the differences between the English and Spanish origins.

Want the code? Here it is (noting that you will need to reference the external JS and CSS differently):

<script type="text/javascript" src="datatable/jquery-1.12.0.min.js"></script> 
<link rel="stylesheet" type="text/css" href="datatable/datatables.min.css"/> 
<script type="text/javascript" src="datatable/datatables.min.js"></script> 
 
<div id="demo"> 
<table> 
    <tr style="width:100%"> 
        <td colspan="3" id="selections"></td> 
    </tr> 
</table>             
<table border="0" cellpadding="0" cellspacing="0" class="datatable display" id="example" summary="Table"> 
<thead> 
    <tr class="dropdown"> 
        <td class="daymonth"></td>         
	<td class="origin"></td> 
	<td class="language"> 
    </tr> 
     
    <tr> 
        <th class="day" scope="col">Days/Months</th>         
        <th class="origin" scope="col">Origins</th> 
	<th class="language" scope="col">Language</th> 
    </tr> 
 
</thead> 
<tfoot style="display:table-header-group">  
<tr>  
	<td></td>  
	<td></td>  
</tr>  
</tfoot>   
<tbody> 
 
<tr> 
	<td>Sunday</td> 
	<td>Sun's day</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">domingo</a></td> 
	<td>Lord's day (think Domini)</td> 
	<td>Spanish</td> 
</tr> 
 
<tr> 
	<td>Monday</td> 
	<td>Moon's day</td> 
	<td>English</td> 
</tr> 
<tr> 
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">lunes</a></td> 
	<td>From Luna, meaning moon</td> 
	<td>Spanish</td> 
</tr> 
      
<tr> 
	<td>Tuesday</td> 
	<td>Tyr's/Tiw's day.  Tyr was a Norse god of war. </td> 
	<td>English</td> 
</tr> 
<tr> 
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">martes</a></td> 
	<td>Mars, Roman god of war</td> 
	<td>Spanish</td> 
</tr> 
      
<tr> 
	<td>Wednesday</td> 
	<td>Woden's day.  Woden was the chief Norse god.</td> 
	<td>English</td> 
</tr> 
<tr> 
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">mi&eacute;rcoles</a></td> 
	<td>Mercury</td> 
	<td>Spanish</td> 
</tr> 
      
<tr> 
	<td>Thursday</td> 
	<td>Thor's day, another Norse god reference</td> 
	<td>English</td> 
</tr> 
<tr> 
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">jueves</a></td> 
	<td>Jove - Jupiter</td> 
	<td>Spanish</td> 
</tr> 
      
<tr> 
	<td>Friday</td> 
	<td>Frigga's day. Frigga was Norse goddess of love.</td> 
	<td>English</td> 
</tr> 
<tr> 
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">viernes</a></td> 
	<td>Venus - Roman goddess of love</td> 
	<td>Spanish</td> 
</tr> 
      
<tr> 
	<td>Saturday</td> 
	<td>Saturn's day</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/planetary-origins-of-the-days-of-the-week-3079196">s&aacute;bado</a></td> 
	<td>Sabbath</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>January</td> 
	<td>Janus, Roman two-faced god</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">enero</a></td> 
	<td>Janus, Roman two-faced god</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>February</td> 
	<td>From februare - to purify</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">febrero</a></td> 
	<td>From februare - to purify</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>March</td> 
	<td>Mars, Roman god of war</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">marzo</a></td> 
	<td>Mars, Roman god of war</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>April</td> 
	<td>Uncertain, but has been said to mean Opening.</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">abril</a></td> 
	<td>Uncertain, but it is very similar to the Spanish word abrir, which means to open.</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>May</td> 
	<td>Maia, Roman earth goddess</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">mayo</a></td> 
	<td>Maia, Roman earth goddess</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>June</td> 
	<td>Juno, Roman goddess married to Jupiter</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">junio</a></td> 
	<td>Juno, Roman goddess married to Jupiter</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>July</td> 
	<td>Julius Caesar</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">julio</a></td> 
	<td>Julius Caesar</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>August</td> 
	<td>Augustus Caesar</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">agosto</a></td> 
	<td>Augustus Caesar</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>September</td> 
	<td>Seven</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">septiembre</a></td> 
	<td>Seven</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>October</td> 
	<td>Eight</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">octubre</a></td> 
	<td>Eight</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>November</td> 
	<td>Nine</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">noviembre</a></td> 
	<td>Nine</td> 
	<td>Spanish</td> 
</tr> 
     
<tr> 
	<td>December</td> 
	<td>Ten</td> 
	<td>English</td> 
</tr> 
<tr>	
	<td><a href="https://www.thoughtco.com/months-of-the-year-3079617">diciembre</a></td> 
	<td>Ten</td> 
	<td>Spanish</td> 
</tr> 
 
 
</tbody> 
</table> 
 
 
<!-- end DataTables plug-in --> 
<style type="text/css"><!-- 
.dataTables_filter { position: relative; left: -40px; } 
--></style> 
<script type="text/javascript">// <![CDATA[ 
$(document).ready(function() { 
    var sels=0; 
    var seltxt=''; 
    var mesa = $('.datatable').DataTable({   
        responsive: true,  
        ordering: false,  
        pageLength: 14,  
        "search": true, 
        "bAutoWidth": false, // toggle this depending on how wide you want the table  
        columns: [  
            { data: 'daymonth' },  
            { data: 'origin' }, 
	{ data: 'language' } 
        ],  
  
        initComplete: function () { // After DataTable initialized  
            this.api().columns().every( function () {  
            /* use of [1,2,3] for second, third and fourth column.  Leave blank - columns() - for all.   
            Multiples? Use columns[0,1]) for first and second, e.g. */  
                 var column = this;   
                 // start customizations from @JamesArthurJohn 
	 sels++; 
	 selw='33%';// the 33% is arbitrary as it is set below  
                 if(sels==1){seltxt='All Days and Months';} 
                 if(sels==2){seltxt='All Origins of Days and Months';} 
	 if(sels==3){seltxt='English and Spanish';} 
                 if(sels==1){selw='20%';} 
	 if(sels==2){selw='60%';} 
	 if(sels==3){selw='20%';} 
                 var select = $('<select style="width:'+selw+'"><option value="">'+seltxt+'</option></select>') 
                      //.appendTo( $(column.footer()).empty() ) // left here if you decide you'd rather append to footer, though if you do, remove the use of selw
                      .appendTo( $('#selections') )   
                      .on( 'change', function () {  
                           var val = $.fn.dataTable.util.escapeRegex(  
                                $(this).val()  
                           );  
                      column  
                           .search( val ? '^'+val+'$' : '', true, false )  
                           .draw();  
                      });  
                 column.data().unique().sort().each( function ( d, j ) {  
                     if(d.indexOf('href')!=-1){// conditional functionality to remove link markup code from options if you decide to include any 
                         dRA=d.split('>');// gets string after the <a href....>
                         d=dRA[1]; 
                         d=d.substr(0,d.length-3); // takes off last 3 characters: /a> 
                     } 
                     select.append( '<option value="'+d+'">'+d+'</option>' ) 
                 });  
	 // end customizations from @JamesArthurJohn 
            }); // this.api function  
        } //initComplete function   
    }); 
}); 
$( window ).resize(function() {  
  $('.datatable').removeAttr('style'); 
}); 
// ]]></script> 
 
<style type="text/css"> 
<!-- 
.dataTables_filter { position: relative; left: -40px; } 
.datatable th { text-align:left; } 
@media all and (min-width: 120px){ 
.tabular-row, .tabular-cell { display: block; } 
} 
@media all and (min-width: 769px){ 
.tabular-row{ display: table-row; } 
.tabular-cell { display: table-cell; } 
} 
--> 
</style> 

Back to top


Other DataTable Articles:

A Basic DataTable

Making Tables Responsive

A Filtered DataTable

A DataTable with an Initial Search Value

A DataTable with Initial Column Search Values

A DataTable with AJAX

A DataTable with Drop-down Select Menus

A DataTable with Multiple Drop-down Select Menus