PDA

View Full Version : Sort list


Jan
12-19-2002, 10:05 AM
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>

Ökii
12-19-2002, 11:01 AM
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.

Ökii
12-19-2002, 11:11 AM
:( the forum added a line break btw - early in the do_sort() function - probably will nay work with that there, so ummm remove it - :)

Another subnote: the first index of each array listing should be numeric - isn't shown on page though, 'tis just there for sorting.

beetle
12-19-2002, 07:35 PM
Well, I found it, tweaked it, and put in some dummy CD data. Enjoy.

http://www.peterbailey.net/dhtml/virtual_db_cds.htm

Jan
12-20-2002, 09:22 AM
You guys rule! This was exactly what I was looking for, and even more! Thank you! :)

MERRY CHRISTMAS EVERYBODY!

Jan
12-20-2002, 10:52 AM
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-20-2002, 01:09 PM
I'm not 100% sure, but this should work in IE5+

Ökii
12-20-2002, 05:32 PM
with mine, the limiting factor is the document.getElementById call.

document.getElementById is

DOM level - 1
JavaScript - 1.5
JScript - 5.0

available in
Internet Explorer - 5.0
Netscape - 6.0
Opera - 5.0

Jan
12-27-2002, 01:02 PM
Would it also be possible to add a little script that shows how many items there is in the list? Like, somewhere on the page it woould say "current amount of singles: <amount>". I would be really happy for an answer! Thanks.

~Jan

PS. I almost forgot! I'm referring to beetle's code.

beetle
12-27-2002, 01:59 PM
Check the page again, I added it. At or around line 138.

:D

Jan
12-27-2002, 02:29 PM
That was just what I was looking for. One question though: If I'd like a line that says "Currently <this> many singles in the list" anywhere on the page, like outside the list code, how would I do that? Thanks again!


~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

Jan
01-10-2003, 12:15 PM
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

beetle
01-11-2003, 02:11 AM
Hmmm, this *should* do it.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);
if ( j == 'title' )
document.write('<td><a href="info_' + this.list[i].catalog + '.html">'+t+'</a></td>');
else
document.write('<td>'+t+'</td>');
}
}
document.write('</tr>');
}
}
document.write('<caption>'+this.listname+'</caption>');
document.write('</table>');
}