6 Replies - 978 Views - Last Post: 11 May 2010 - 06:21 PM

#1 Guest_Jason*


Reputation:

getting javascript to work with other browsers

Posted 11 May 2010 - 11:16 AM

hello, I am using the following code to make a sortable table on my website. I got the code from http://javascript.in...data-table.html (i admit it is not my code but it suits my needs well)

since i know most people probaly donot what to click on links to random sites, this is the code i am using :

     
<!-- TWO STEPS TO INSTALL SORT DATA TABLE: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <script LANGUAGE="Javascript"> <!-- This script and many more are available free online at --> <!-- The Javascript Source!! http://javascript.internet.com --> <!-- Begin function setDataType(cValue) { // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY // SORTING WHEN IN THE SORT FUNCTION var isDate = new Date(cValue); if (isDate == "NaN") { if (isNaN(cValue)) { // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN // STRING UPPER CASE TO ASSURE PROPER A-Z SORT cValue = cValue.toUpperCase(); return cValue; } else { // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF // THE NUMBER WHEN IT IS A STRING var myNum; myNum = String.fromCharCode(48 + cValue.length) + cValue; return myNum; } } else { // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND // AND RETURN THE STRING NUMBER //BUG - STRING AND NOT NUMERICAL SORT ..... // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.) var myDate = new String(); myDate = isDate.getFullYear() + " " ; myDate = myDate + isDate.getMonth() + " "; myDate = myDate + isDate.getDate(); + " "; myDate = myDate + isDate.getHours(); + " "; myDate = myDate + isDate.getMinutes(); + " "; myDate = myDate + isDate.getSeconds(); //myDate = String.fromCharCode(48 + myDate.length) + myDate; return myDate ; } } function sortTable(col, tableToSort) { var iCurCell = col + tableToSort.cols; var totalRows = tableToSort.rows.length; var bSort = 0; var colArray = new Array(); var oldIndex = new Array(); var indexArray = new Array(); var bArray = new Array(); var newRow; var newCell; var i; var c; var j; // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED for (i=1; i < tableToSort.rows.length; i++) { colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText); iCurCell = iCurCell + tableToSort.cols; } // ** COPY ARRAY FOR COMPARISON AFTER SORT for (i=0; i < colArray.length; i++) { bArray[i] = colArray[i]; } // ** SORT THE COLUMN ITEMS //alert ( colArray ); colArray.sort(); //alert ( colArray ); for (i=0; i < colArray.length; i++) { // LOOP THROUGH THE NEW SORTED ARRAY indexArray[i] = (i+1); for(j=0; j < bArray.length; j++) { // LOOP THROUGH THE OLD ARRAY if (colArray[i] == bArray[j]) { // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE // NEW ORDER ARRAY SO ROWS CAN BE MOVED .... // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE // NEW ORDER ARRAY for (c=0; c<i; c++) { if ( oldIndex[c] == (j+1) ) { bSort = 1; } } if (bSort == 0) { oldIndex[i] = (j+1); } bSort = 0; } } } // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE .... for (i=0; i<oldIndex.length; i++) { newRow = tableToSort.insertRow(); for (c=0; c<tableToSort.cols; c++) { newCell = newRow.insertCell(); newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML; } } //MOVE NEW ROWS TO TOP OF TABLE .... for (i=1; i<totalRows; i++) { tableToSort.moveRow((tableToSort.rows.length -1),1); } //DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE .... for (i=1; i<totalRows; i++) { tableToSort.deleteRow(); } } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=5> <TR bgcolor=mediumblue> <TD><A href="javascript:sortTable(0, rsTable);"><FONT color=white><B>ID</FONT></B></A></TD> <TD><A href="javascript:sortTable(1, rsTable);"><FONT color=white><B>NAME</FONT></B></A></TD> <TD><A href="javascript:sortTable(2, rsTable);"><FONT color=white><B>DATE</FONT></B></A></TD> <TD><A href="javascript:sortTable(3, rsTable);"><FONT color=white><B>PHONE</FONT></B></A></TD> <TD><A href="javascript:sortTable(4, rsTable);"><FONT color=white><B>WORKFLOW</FONT></B></A></TD> </TR></FONT> <TR> <TD>1</TD> <TD>Andy Berry</TD> <TD>4/9/72</TD> <TD>763-555-1212</TD> <TD>REVIEW</TD> </TR> <TR> <TD>2</TD> <TD>Dan Developer</TD> <TD>9/3/63</TD> <TD>215-555-1400</TD> <TD>SAME</TD> </TR> <TR> <TD>3</TD> <TD>John Javascript</TD> <TD>3/4/71</TD> <TD>612-555-0987</TD> <TD>REVIEW</TD> </TR> <TR> <TD>4</TD> <TD>Jerry JSPage</TD> <TD>8/2/71</TD> <TD>215-555-7654</TD> <TD>SAME</TD> </TR> <TR> <TD>5</TD> <TD>Mary Mainframe</TD> <TD>3/28/70</TD> <TD>763-555-8295</TD> <TD>REVIEW</TD> </TR> <TR> <TD>6</TD> <TD>Elaine Ecommerce</TD> <TD>2/28/29</TD> <TD>612-555-1338</TD> <TD>REVIEW</TD> </TR> <TR> <TD>7</TD> <TD>John Smith</TD> <TD>12/31/00</TD> <TD>610-555-0987</TD> <TD>SAME</TD> </TR> <TR> <TD>8</TD> <TD>Candy Coder</TD> <TD>4/1/70</TD> <TD>000-555-9099</TD> <TD>SAME</TD> </TR> <TR> <TD>9</TD> <TD>Pippy Long Stocking</TD> <TD>1/1/30</TD> <TD>613-555-1338</TD> <TD>DIFFERENT</TD> </TR> <TR> <TD>10</TD> <TD>111222</TD> <TD>2/2/01</TD> <TD>345-555-7654</TD> <TD>DIFFERENT</TD> </TR> <TR> <TD>11</TD> <TD>Apple Man</TD> <TD>3/13/74</TD> <TD>215-555-4043</TD> <TD>DIFFERENT</TD> </TR> </TABLE> <p><center> <font face="arial, helvetica" size"-2">Free Javascripts provided<br> by <a href="http://javascriptsource.com">The Javascript Source</a></font> </center><p> <!-- Script Size: 7.51 KB -->





for some reason the code only works for IE, is there an easy way to get this code to work for other browsers such as Firefox or saffari? Thanks!

Is This A Good Question/Topic? 0

Replies To: getting javascript to work with other browsers

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: getting javascript to work with other browsers

Posted 11 May 2010 - 03:37 PM

The best option would be to look at a jQuery alternative, for example : http://tablesorter.com/docs/ , that should work in all browsers.

Also check out : http://www.webdesign...e-manipulation/
Was This Post Helpful? 1
  • +
  • -

#3 Guest_Jason*


Reputation:

Re: getting javascript to work with other browsers

Posted 11 May 2010 - 04:12 PM

for the link that you posted, it tells me to "Start by telling tablesorter to sort your table when the document is loaded:"
and gives me this code
$(document).ready(function()     {         $("#myTable").tablesorter();     } ); 


where do i put this?

this is what ive got:

<head>
<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

</head>
   
<body>
<table id="myTable"> <thead> <tr>     <th>Last Name</th>     <th>First Name</th>     <th>Email</th>     <th>Due</th>     <th>Web Site</th> </tr> </thead> <tbody> <tr>     <td>Smith</td>     <td>John</td>     <td>jsmith@gmail.com</td>     <td>$50.00</td>     <td>http://www.jsmith.com</td> </tr> <tr>     <td>Bach</td>     <td>Frank</td>     <td>fbach@yahoo.com</td>     <td>$50.00</td>     <td>http://www.frank.com</td> </tr> <tr>     <td>Doe</td>     <td>Jason</td>     <td>jdoe@hotmail.com</td>     <td>$100.00</td>     <td>http://www.jdoe.com</td> </tr> <tr>     <td>Conway</td>     <td>Tim</td>     <td>tconway@earthlink.net</td>     <td>$50.00</td>     <td>http://www.timconway.com</td> </tr> </tbody> </table> 
$(document).ready(function()     {         $("#myTable").tablesorter();     } );  
</body>


Was This Post Helpful? 0

#4 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: getting javascript to work with other browsers

Posted 11 May 2010 - 04:19 PM

You need to add

<script type="text/javascript">
	$(document).ready(function() 
		{ 
			$("#myTable").tablesorter(); 
		} 
	); 
</script>



to the Head section,

this should work:
But make sure you download the jQuery and sorter Javascript files,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>

<script type="text/javascript">
	$(document).ready(function() 
		{ 
			$("#myTable").tablesorter(); 
		} 
	); 
</script>

</head>

<body>

    <table id="myTable"> 
        <thead> 
            <tr> 
                <th>Last Name</th> 
                <th>First Name</th> 
                <th>Email</th> 
                <th>Due</th> 
                <th>Web Site</th> 
            </tr> 
            </thead> 
            <tbody> 
            <tr> 
                <td>Smith</td> 
                <td>John</td> 
                <td>jsmith@gmail.com</td> 
                <td>$50.00</td> 
                <td>http://www.jsmith.com</td> 
            </tr> 
            <tr> 
                <td>Bach</td> 
                <td>Frank</td> 
                <td>fbach@yahoo.com</td> 
                <td>$50.00</td> 
                <td>http://www.frank.com</td> 
            </tr> 
            <tr> 
                <td>Doe</td> 
                <td>Jason</td> 
                <td>jdoe@hotmail.com</td> 
                <td>$100.00</td> 
                <td>http://www.jdoe.com</td> 
            </tr> 
            <tr> 
                <td>Conway</td> 
                <td>Tim</td> 
                <td>tconway@earthlink.net</td> 
                <td>$50.00</td> 
                <td>http://www.timconway.com</td> 
            </tr> 
        </tbody> 
    </table> 

</body>
</html>



Was This Post Helpful? 1
  • +
  • -

#5 new2cpp  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 04-February 10

Re: getting javascript to work with other browsers

Posted 11 May 2010 - 05:13 PM

THANKS!!

One last question...is there a way that when you click on the heading the first time it sorts in from largest number to least and then the second time its clicked the opposite (im using the table for stats...)

THANKS AGAIN!!
Was This Post Helpful? 0
  • +
  • -

#6 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: getting javascript to work with other browsers

Posted 11 May 2010 - 05:59 PM

Yes,

Well you can make it so it automatically loads the table sorted by a particular column,

	 $("#myTable").tablesorter( {sortList: [[3,1]]} ); 


Instead of

	$("#myTable").tablesorter(); 


Will automatically sort the table with the 4th column - 'Due' (3 because we start from 0), and then 1 for descending order)

This post has been edited by revolutionx: 11 May 2010 - 06:00 PM

Was This Post Helpful? 0
  • +
  • -

#7 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: getting javascript to work with other browsers

Posted 11 May 2010 - 06:21 PM

Here is a MAJOR modification to the link in post #1.
It is compressed and, I believe, a lot more flexible.
It does not use any JQuery code.
<html>
<HEAD>
<script type="text/javascript"> <!-- archiac form: LANGUAGE="Javascript" -->
// From: http://www.dreamincode.net/forums/topic/173107-getting-javascript-to-work-with-other-browsers/

/*
  This script and many more are available free online at
  The Javascript Source!! http://javascript.internet.com
  NOTE: HIGHLY MODIFIED from: http://javascript.internet.com/forms/sort-data-table.html
*/

// format ID, fName, lName, Date, Phone, WorkFlow
var information = [
  "1,Andy,Berry,4/9/72,763-555-1212,REVIEW",
  "2,Dan,Developer,9/3/63,215-555-1400,SAME",
  "3,John,Javascript,3/4/71,612-555-0987,REVIEW",
  "4,Jerry,JSPage,8/2/71,215-555-7654,SAME",
  "5,Mary,Mainframe,3/28/70,763-555-8295,REVIEW",
  "6,Elaine,Ecommerce,2/28/29,612-555-1338,REVIEW",
  "7,John,Smith,12/31/00,610-555-0987,SAME",
  "8,Candy,Coder,4/1/70,000-555-9099,SAME",
  "9,Pippy,Long Stocking,1/1/30,613-555-1338,DIFFERENT",
  "10,111222,,2/2/01,345-555-7654,DIFFERENT",
  "11,Apple,Man,3/13/74,215-555-4043,DIFFERENT"	// NOTE: no comma after final entry
];
// Note above information could also be comma separated fields
// and be accessed via an external JS file or using Ajax methods to read text files

function tableHeading() {
  var str = '';
  str += '<TR bgcolor=mediumblue>';
  str += '<TH onclick="sortTable(0, \'N\')"><FONT color=white><B><u>ID</u></FONT></B></A></TH>';
  str += '<TH onclick="sortTable(1, \'A\')"><FONT color=white><B><u>First NAME</u></FONT></B></A></TH>';
  str += '<TH onclick="sortTable(2, \'A\')"><FONT color=white><B><u>Last NAME</u></FONT></B></A></TH>';
  str += '<TH onclick="sortTable(3, \'D\')"><FONT color=white><B><u>DATE</u></FONT></B></A></TH>';
  str += '<TH onclick="sortTable(4, \'A\')"><FONT color=white><B><u>PHONE</u></FONT></B></A></TH>';
  str += '<TH onclick="sortTable(5, \'A\')"><FONT color=white><B><u>WORKFLOW</u></FONT></B></A></TH>';
  str += '</TR>';
  return str;
}
function tableBody() {
  var str = '';
  var flds = [];
  for (var i=0; i<SortPtr.length; i++) {
    rec = SortPtr[i].split('|');
    flds = information[rec[1]].split(',');
    str += '<tr>';
    str += '<td>'+flds[0]+'</td>';
    str += '<td>'+flds[1]+'</td>';
    str += '<td>'+flds[2]+'</td>';
    str += '<td>'+flds[3]+'</td>';
    str += '<td>'+flds[4]+'</td>';
    str += '<td>'+flds[5]+'</td>';
    str += '</tr>';
  }
  return str;
}
function createTable() {
  var str = '';
  str += '<TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable  cols=5>';
  str += tableHeading();
  str += tableBody();
  str += '</TABLE>';
  document.getElementById('tableDisplay').innerHTML = str;
}
function NumSort(a,B)/> {  // note: should be lower case 'b', but forum keeps changing it to upper case ???
	return a-b;
}

var SortPtr = [];
function sortTable(Field,srtBy) {
  var flds = [];
  var tmp = [];	
  SortPtr = [];
  var temp = '';
  for (var i=0; i<information.length; i++) {
    flds = information[i].split(',');
    if (srtBy != 'D') { SortPtr.push(flds[Field]+'|'+i); }
                 else { tmp = flds[Field].split('/'); 
                 		if (tmp[0].length < 2) { tmp[0] = '0'+tmp[0]; }
                 		if (tmp[1].length < 2) { tmp[1] = '0'+tmp[1]; }
                 		temp = tmp[2]+tmp[0]+tmp[1];
                 		SortPtr.push(temp+'|'+i);
                      }
  }
  switch (srtBy) {
    case 'N': 				// numeric sort
		SortPtr = SortPtr.sort(NumSort);
		break;
    case 'D': 				// date sort
		SortPtr = SortPtr.sort();
		break;
    default : 				// alpha sort
		SortPtr = SortPtr.sort();
		break;
  }
  createTable();
}
onload = function() {
  sortTable(0,'N');
}
</script>
</HEAD>
<BODY>
<center>
<div id="tableDisplay"></div>
</center>
<p><center>
<font face="arial, helvetica" size"-2">Free Javascripts provided<br>
by <a href="http://javascriptsource.com">The Javascript Source</a></font>
</center><p>
</body>
</html>


Would be a two character change to reverse sort the number field.
function NumSort(a,B)/> {  // note: should be lower case 'b', but forum keeps changing it to upper case ???
	return b-a;
}


Good Luck!
:bananaman:

This post has been edited by JMRKER: 11 May 2010 - 06:23 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1