I currently have a table on the web for events. It includes the event name, date, and type. My table is completely sortable by each of those categories, but I want to take it to another level. I would like to add a drop down menu where the user can filter by event. I know this should be done by loading the rows into an array and then filtering by event. It's been a while since I've had to do javascript, so can anyone provide me with some advice on how to set this up? Thanks!
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Javascript table filter
- Thread starter webdev17
- Start date
theniteowl
Programmer
You mean you want to filter by event TYPE? So that only events of the selected type will show on selection?
How do you populate the data now? From a database?
One approach with a database.
When the page opens check to see if a value was passed on the URL for which type to filter for.
Do a query to select distinct types from the database so you can populate your list box with the list of types to select from.
Then do a query to select all records that match the type passed on the URL and if no value was passed then you set some default querystring instead.
When someone changes the selection in the list box you submit the page to itself passing the selected value on the URL so when the page reloads it now has a value to base the query on: Example: mySQL="Select eventname, date, type FROM mytable WHERE type='userselectionvalue'
If you are doing this from arrays then the approach would be similar.
You can use a multi-dimensioned array where the first dimension is a list of event types and the second dimension is the event info for that type. You create the list box from the first dimension of the array.
Or you use a single dimensioned array with the data in groups of three.
For instance.
var arrMyarray = new Array();
arrMyarray[0] = 'EventType1';
arrMyarray[1] = 'EventName1';
arrMyarray[2] = 'EventDate1';
arrMyarray[3] = 'EventType2';
arrMyarray[4] = 'EventName2';
arrMyarray[5] = 'EventDate2';
arrMyarray[6] = 'EventType3';
arrMyarray[7] = 'EventName3';
arrMyarray[8] = 'EventDate3';
Since you always have three values for an event you know that the first value and every third one after that is the event type. You can loop through the array to pull out values.
function testEventType(which)
{
for (var x=0; x<arrMyarray.length; x++)
{
if (arrMyarray[x] == which)
{
alert(arrMyarray[x] + ' ' + arrMyarray[x+1] + ' ' + arrMyarray[x+2]);
}
x=x+2;
}
}
The same approach as with the database would work, checking for a passed value on the URL and using that as the value to search the array for to display the information. If no value passed then you could default to showing all events.
Stamp out, eliminate and abolish redundancy!
How do you populate the data now? From a database?
One approach with a database.
When the page opens check to see if a value was passed on the URL for which type to filter for.
Do a query to select distinct types from the database so you can populate your list box with the list of types to select from.
Then do a query to select all records that match the type passed on the URL and if no value was passed then you set some default querystring instead.
When someone changes the selection in the list box you submit the page to itself passing the selected value on the URL so when the page reloads it now has a value to base the query on: Example: mySQL="Select eventname, date, type FROM mytable WHERE type='userselectionvalue'
If you are doing this from arrays then the approach would be similar.
You can use a multi-dimensioned array where the first dimension is a list of event types and the second dimension is the event info for that type. You create the list box from the first dimension of the array.
Or you use a single dimensioned array with the data in groups of three.
For instance.
var arrMyarray = new Array();
arrMyarray[0] = 'EventType1';
arrMyarray[1] = 'EventName1';
arrMyarray[2] = 'EventDate1';
arrMyarray[3] = 'EventType2';
arrMyarray[4] = 'EventName2';
arrMyarray[5] = 'EventDate2';
arrMyarray[6] = 'EventType3';
arrMyarray[7] = 'EventName3';
arrMyarray[8] = 'EventDate3';
Since you always have three values for an event you know that the first value and every third one after that is the event type. You can loop through the array to pull out values.
function testEventType(which)
{
for (var x=0; x<arrMyarray.length; x++)
{
if (arrMyarray[x] == which)
{
alert(arrMyarray[x] + ' ' + arrMyarray[x+1] + ' ' + arrMyarray[x+2]);
}
x=x+2;
}
}
The same approach as with the database would work, checking for a passed value on the URL and using that as the value to search the array for to display the information. If no value passed then you could default to showing all events.
Stamp out, eliminate and abolish redundancy!
- Thread starter
- #3
theniteowl
Programmer
It really has a lot to do with how you load the info for use in the browser but here is a quick and dirty sample of using an array of data and a select box.
Making it into a multi-dimensioned array where the first dimension is the event types and the second dimension for each event type contains the events might work better for you. Again, it all depends on how you access the data in the XML files.
Stamp out, eliminate and abolish redundancy!
Making it into a multi-dimensioned array where the first dimension is the event types and the second dimension for each event type contains the events might work better for you. Again, it all depends on how you access the data in the XML files.
Code:
<HTML>
<head>
<script type="text/JavaScript">
var arrEvents = new Array();
arrEvents[0] = 'Work on project';
arrEvents[1] = 'Fix refridgerator';
arrEvents[2] = '1/1/2006';
arrEvents[3] = 'Watch TV';
arrEvents[4] = 'Lost';
arrEvents[5] = '1/2/2006';
arrEvents[6] = 'Read Book';
arrEvents[7] = 'Moby Dick';
arrEvents[8] = '1/3/2006';
arrEvents[9] = 'Read Book';
arrEvents[10] = 'Kama Sutra';
arrEvents[11] = '1/4/2006';
arrEvents[12] = 'Work on project';
arrEvents[13] = 'Convert Chevette into Corvette';
arrEvents[14] = '1/5/2006';
arrEvents[15] = 'Read Book';
arrEvents[16] = 'Quantum effects on space/time warping through gravity: For Dummies';
arrEvents[17] = '1/6/2006';
arrEvents[18] = 'Watch TV';
arrEvents[19] = 'SchoolHouse Rock';
arrEvents[20] = '1/7/1976';
arrEvents[21] = 'Work on project';
arrEvents[22] = 'Shave the cat';
arrEvents[23] = '1/8/2006';
function buildOutput(which)
{
var outstr='<table width="600" border="1">'
var outrows='';
for (var x=0;x<arrEvents.length; x++)
{
if (arrEvents[x] == which)
{
outrows = outrows + '<tr><td width="200">' + arrEvents[x] + '</td>';
outrows = outrows + '<td width="200">' + arrEvents[x+1] + '</td>';
outrows = outrows + '<td width="200">' + arrEvents[x+2] + '</td></tr>';
}
}
if (outrows != '')
{
outstr = outstr + outrows + '</table>';
document.getElementById('myEvents').innerHTML = outstr;
document.getElementById('myEvents').style.display = 'inline';
}
}
</script>
</head>
<body>
<form method="get" action="">
<select name="mySelect" id="mySelect" onchange="buildOutput(this.value);">
<option value="Select Event">Select Event</option>
<option value="Read Book">Read Book</option>
<option value="Watch TV">Watch TV</option>
<option value="Work on project">Work on project</option>
</select>
</form>
<div id="myEvents">
</div>
</body>
</HTML>Stamp out, eliminate and abolish redundancy!
- Status
Similar threads
- Locked
- Question