vacances2000
Gebruiker
- Lid geworden
- 28 jan 2013
- Berichten
- 113
Beste,
Ik heb de volgende HTML / Javascript voor een filter table. Op zich werkt het prima, maar ik zou er graag een sorteer functie aan willen toevorgen aan elke kolom. Ik heb zo rondgekeken op internet en zie dat het niet te moeilijk moet zijn maar oh wee ik zelf geen ervaring met javascript, enkel HTML / CSS weet ik nog wel te klaren. Iemand die kan helpen?
Dit zijn me codes (javascript en html) die ik heb:
Iemand die zou weten hoe dat kan sorteer functie aan elke kolom toevoegen?
Beste wensen!
Vriendelijke groeten,
Jonathan
Ik heb de volgende HTML / Javascript voor een filter table. Op zich werkt het prima, maar ik zou er graag een sorteer functie aan willen toevorgen aan elke kolom. Ik heb zo rondgekeken op internet en zie dat het niet te moeilijk moet zijn maar oh wee ik zelf geen ervaring met javascript, enkel HTML / CSS weet ik nog wel te klaren. Iemand die kan helpen?
Dit zijn me codes (javascript en html) die ik heb:
HTML:
<body>
<script>
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
<h2>Light Javascript Table Filter</h2>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<table id="mytable" class="order-table table" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane@vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred@batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>
</body>
Iemand die zou weten hoe dat kan sorteer functie aan elke kolom toevoegen?
Beste wensen!
Vriendelijke groeten,
Jonathan