Hey ppl!
I was just wondering, if there's any way to have a list, and with some script sorting it somehow? I have this list of CDs, where I have the title, catalogue number, year of release, country of origin, number of tracks and format - and everytime I put new data into it, I want the list to be sorted in alphabetical order by the title. It would also be cool, if the viewer could sort the by any of the other variables, ie. year of release. Is that possible and if it is, could you please give me an example?
Thanks alot!
~Jan
beetle
12-19-2002, 10:18 AM
as a matter of fact, I've got something that does that! I've got a better, more universal example someplace else (I'll find it tomorrow) but for now, here ya go. Give me some sample data and I'll stick it into the newer version I have of this script at the office.<html>
<head>
<title>Virtual DB test</title>
<style>
table.dvdList {
font: .8em Verdana, sans-serif;
border-collapse: collapse;
width: 100%;
}
table.dvdList th {
background-color: #EEE;
border: 1px solid #666;
padding: 5px;
}
table.dvdList td {
border: 1px solid #666;
padding: 3px;
}
table.dvdList caption {
font: 1.5em 'Trebuchet MS',Verdana, sans-serif;
}
table.dvdList caption em {
font-size: .8em;
}
div.example {
color: red;
font: 1em 'Courier New', mono;
}
</style>
<script type="text/javascript">
function dvdlist(listName) {
this.listname = listName;
this.format = new Array("Title","Actor","Director","Company","Length","Year","Format","Genre","Comments");
this.list = new Array();
var i = 0;
this.list[i++] = new dvd("Cadence","Charlie Sheen, Martin Sheen","Martin Sheen","Movie Group","97 mins",1990,"NTSC","Action/Adventure","Dad and son in Army jail drama");
this.list[i++] = new dvd("Conspiracy Theory","Mel Gibson, Julia Roberts","Richard Donner","Warner Bros","130 mins",1997,"PAL","Thriller","Taxi driver with a past");
this.list[i++] = new dvd("Devils Advocate","Keanu Reaves, Al Pacino","Taylor Hackford","Twentieth Century Fox","138 mins",1997,"PAL","Thriller","Legal/Satan twist");
this.list[i++] = new dvd("Gladiator","Russell Crowe","Ridley Scott","Dreamworks Pictures","149 mins",2000,"PAL","Action/Adventure","Set in Ancient Rome");
this.list[i++] = new dvd("House II","Ayre Gross","Ethan Wiley","Digital Entertainment Ltd","88 mins",1987,"PAL","Horror","Gramps is cool!");
this.list[i++] = new dvd("Lost Boys","Jason Patric, Keifer Sutherland","Joel Shumacher","Warner Bros","93 mins",1987,"PAL","Thriller","Vampire film with a twist");
this.list[i++] = new dvd("True Lies","Arnold Swarzenegger","James Cameron","Warner Bros","135 mins",1994,"PAL","Action/Adventure","Spy action");
this.list[i++] = new dvd("Wyrd Sisters","Various (Animation)","Jean Flynn","Various","140 mins",2000,"PAL","Sci-Fi/Fantasy","Animation of Terry Pratchett book");
this.list[i++] = new dvd("Fistful of Dollars","Clint Eastwood","Sergio Leone","United Artists/MGM","97 mins",1964,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("Few Dollars More","Clint Eastwood","Sergio Leone","United Artists/MGM","126 mins",1965,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("The Good The Bad The Ugly","Clint Eastwood","Sergio Leone","United Artists/MGM","154 mins",1966,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("Eraser","Arnold Swarzenegger","Charles Russell","Warner Bros","107 mins",1996,"PAL","Action/Adventure","Witness Protection type");
this.list[i++] = new dvd("6th Day","Arnold Swarzenegger","Roger Spottiswoode","Columbia Pictures","124 mins",2000,"PAL","Sci-Fi/Fantasy","Arnie clone takes over his life");
this.list[i++] = new dvd("Matrix","Keanu Reaves","The Wachowski Bros","Warner Bros","135 mins",1999,"PAL","Sci-Fi/Fantasy","Sci-Fi with excellent graphics");
this.list[i++] = new dvd("End of Days","Arnold Swarzenegger","Peter Hyams","Universal","121 mins",1999,"PAL","Action/Adventure","Fight the devil");
this.quantity = i;
this.error = "Title Not Found";
}
function dvd(title, actor, director, company, length, year, format, genre, comments){
this.title = title;
this.actor = actor;
this.director = director;
this.company = company;
this.length = length;
this.year = year;
this.format = format;
this.genre = genre;
this.comments = comments;
this.selected = true;
}
function dvdlist.prototype.display(qty) {
var shown = 0;
if (typeof qty == 'undefined') var qty = this.quantity;
document.write('<table class="dvdList"><tr>');
for (var i=0; i<this.format.length; i++)
document.write('<th>'+this.format[i]+'</th>');
document.write('</tr>');
for (i=0; i<this.quantity; i++) {
if (this.list[i].selected && shown++ < qty) {
document.write('<tr>');
for (var j in this.list[i]) {
if (j != 'selected') {
var t = eval('this.list['+i+'].'+j);
document.write('<td>'+t+'</td>');
}
}
document.write('</tr>');
}
}
document.write('<caption>'+this.listname+'</caption>');
document.write('</table>');
}
function dvdlist.prototype.select(field, val) {
var r = new RegExp(val,"i");
for (var i=0; i<this.quantity; i++) {
var t = eval('this.list[i].'+field);
if (!r.test(t)) this.list[i].selected = false;
}
}
function dvdlist.prototype.selectAll() {
for (var i=0; i<this.quantity; i++) {
this.list[i].selected = true;
}
}
function dvdlist.prototype.sortBy(field) {
this.list.sort(sortHandler);
function sortHandler(a, b) {
var aa = eval('a.'+field);
var bb = eval('b.'+field);
if (aa == bb) return 0;
return (aa > bb) ? 1 : -1;
}
}
function dvdlist.prototype.get(field, val) {
for (var i=0; i<this.quantity; i++) {
var t = eval('this.list[i].'+field);
if (t == val) return this.list[i];
}
return this.error;
}
</script>
</head>
<body>
<script>
var myList = new dvdlist("My DVDs");
document.write('<br /><div class="example">Example of full list, unchanged</div>');
myList.display();
document.write('<br /><div class="example">Example of limiting results to 5</div>');
myList.display(5);
document.write('<br /><div class="example">Example of limiting results to 5 and sorting by "year"</div>');
myList.sortBy('year');
myList.display(5);
document.write('<br /><div class="example">Example of sorting by "year" where "actor" contians "arnold"</div>');
myList.sortBy('year');
myList.select('actor','arnold');
myList.display();
document.write('<br /><div class="example">Example of sorting by "title" where "genre" is Action/Adventure</div>');
myList.selectAll();
myList.sortBy('title');
myList.select('genre','action');
myList.display();
document.write('<br /><div class="example">Example where "genre" is Action/Adventure and "company" is "Warner Bros"</div>');
myList.selectAll();
myList.select('genre','action');
myList.select('company','warner');
myList.display();
</script>
</body>
</html>
or (to dynamically sort them after page load by clicking any column header) here's a scriptlet I ran up
<script type="text/javascript">
/*<![CDATA[*/
row_array = new Array()
row_array[0] = new Array("0","name","park","country","year")
row_array[1] = new Array("1","coaster a","park f","uk","1970")
row_array[2] = new Array("2","coaster c","park e","usa","1998")
row_array[3] = new Array("3","coaster b","park h","japan","1983")
row_array[4] = new Array("4","coaster d","park g","canada","1983")
row_array[5] = new Array("5","coaster e","park f","canada","1993")
sort_array = new Array()
function do_sort(column_ref)
{
for (count_sort = 0; count_sort < row_array.length-1; count_sort++)
{
sort_array[count_sort] = new Array(row_array[count_sort+1][column_ref],row_array[count_sort+1][0]);
}
sort_array.sort();
for (full_sort = 0; full_sort < sort_array.length; full_sort++)
{
for (make_row = 1; make_row < row_array[0].length; make_row++)
{
document.getElementById('dyn_row'
+(full_sort+1)+ 'dyn_col' +make_row).innerHTML = row_array[sort_array[full_sort][1]][make_row];
}
}
}
document.write('<table border="0" cellpadding="2" cellspacing="2" align="left" style="background-color:#FFF">');
count_rows = -1;
while (++count_rows < row_array.length)
{
document.write('<tr>');
count_columns = 0;
while (++count_columns < row_array[0].length)
{
if (count_rows == 0)
{
document.write('<td class="" style="background-color: #FFF; border:2px outset #00349A" align="center"><a href="javascript:do_sort('
+count_columns+ ')"><b>'
+row_array[count_rows][count_columns]+ '</b></a></td>');
}
else
{
document.write('<td class="" style="background-color: #CCC" id="dyn_row'
+count_rows+ 'dyn_col'
+count_columns+ '">'
+row_array[count_rows][count_columns]+ '</td>');
}
}
document.write('</tr>');
}
document.write('</table>');
/*]]>*/
</script>
Doesn't mind how many array indices there are.
Just make sure array [0] has the column header titles.
Hey again,
I was just wondering in what browsers these work? I tried it in Netscape 4.7 and it didn't work, but in 7.0 it did. I just want to know wich versions of IE and Netscape it works in, so that I can re-direkt old browser to an "up-date" page. Thanks again guys, you've done so much already!
~Jan
beetle
12-27-2002, 08:42 PM
Well, you can access that simply by calling on the quantity property of the data object, in my example I used myData. So, you can use any method you like from there, document.write(), use innerHTML or innerText, or change the nodeValue of a textNode.
document.write("Currently " + myData.quantity + " singles in the list");
-or-
document.getElementById('someElement').innerText = "Currently " + myData.quantity + " singles in the list";
-or-
???
Like I said, there's many ways to get the data to the page.
I think you get it (maybe) :D
I'm really thankful for all your help, BUT there is still one thing I was wondering... This is my LAST question: how could I add a link to every title in the list, that has the same name as the catalogue number? Example: info_CATALOGUENUMBER.html where I could add further info on the single, such as titles of the tracks on the single.
Hope you understand my question, and thanks so much for everything! :)
~Jan
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.