Filtered table

Status
Niet open voor verdere reacties.

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:
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
 
Je gebruikt jQuery
Code:
$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);
$(document).ready(function()
    {
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
    }
);
Heb je voorafgaand aan dit script jQuery geladen?
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  of
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Suc6. Have fun.
 
Beste, ja heb ik.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Maar géén effect op de sorteer functie.

Vriendelijke groeten,

Jonathan
 
Je gebruikt een jQuery plugin 'tablesorter' zo te zien. Is de plugin geladen?
Zo ja, de doc vind je hier http://tablesorter.com/docs/
Hoofdletter T in myTable waarschijnlijk niet de oplossing?
$("#myTable").tablesorter({ sortList: [...] });
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan