A DataTable with customized drop-down menus
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é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á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>
Other DataTable Articles:
A DataTable with an Initial Search Value
A DataTable with Initial Column Search Values